如何在mat-select中使用变更事件流？
如何在mat-select中使用变更事件流？
提问于 2018-08-07 09:02:42
我正在尝试使用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([])]
});
}
}谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 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)});
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51717456
复制相关文章
相似问题