我正在尝试使用Angular Materials mat-select中的optionSelectionChanges可观察属性。它给出了所有子选项的更改事件的组合流。
当用户更改更新验证器的选项时,我希望获得以前的值。我不知道如何处理从模板到组件的可观察到的流,或者这个属性是不是最好这样做?
html:
<mat-form-field>
<mat-select (optionSelectionChanges)='getStream' formControlName='value1'>
<mat-option value='1'>Option1</mat-option>
<mat-option value='2'>Option2</mat-option>
</mat-select>
</mat-form-field>
组件:
import { Component, OnInit } from '@angular/core';
import {FormGroup, FormControl, Validators, FormBuilder} from '@angular/forms';
import { MatOptionSelectionChange } from '@angular/material';
@Component({
selector: 'test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
form: FormGroup;
getStream: Observable<MatOptionSelectionChange>;
constructor(private _fb: FormBuilder) { }
ngOnInit() {
this.getStream.subscribe(res => {console.log(res)})
this.form = this._fb.group({
'value1': [null, Validators.compose([])]
});
}
}
谢谢
发布于 2018-08-07 22:22:46
optionSelectionChanges
是一个属性,而不是输出。它是在你的脚本代码中使用的--我不认为你可以在模板中使用它。下面是一个例子:
<mat-select #select="matSelect" formControlName='value1'>
<mat-option value='1'>Option1</mat-option>
<mat-option value='2'>Option2</mat-option>
</mat-select>
import { AfterViewInit, Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { MatSelect} from '@angular/material/select';
@Component({
selector: 'test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements AfterViewInit, OnInit {
@ViewChild('select') select: MatSelect;
form: FormGroup;
constructor(private _fb: FormBuilder) { }
ngOnInit() {
this.form = this._fb.group({
'value1': [null, Validators.compose([])]
});
}
ngAfterViewInit() {
this.select.optionSelectionChanges.subscribe(res => {console.log(res)});
}
}
https://stackoverflow.com/questions/51717456
复制相似问题