使用初始化值触发 valueChange - angular2
Trigger valueChange with Initialized value - angular2
我正在编写一个 angular2 应用程序,但遇到了问题。
首先,我有一个 select 绑定到 formControl
:
export class MyComponent implements OnInit {
profilesBy: Observable<any[]>;
myControl = new FormControl();
constructor(public http: Http) {
this.profilesBy = this.myControl.valueChanges
.map(text => new formatQuery(text.value))
.switchMap(body => this.getGroupBy(body, this.url), (_, res)=> res.json().aggregations.group_by_type.buckets);
}
}
所以,myControl
是 formControl
,profilesBy
是数组的 Observable。
formatQuery
只是使用 select 和 getGroupBy
return 一个 http
请求的值来格式化查询的正文(即:http.post( url, 正文) ... ).
然后我分配响应:res.json().aggregations.group_by_type.buckets
不过这个也别想太多了。
这是我的模板:
<md-card>
<h4>Profiles group by :
<select [formControl]="myControl">
Some options ...
</select>
</h4>
<div *ngFor="let profile of profilesBy | async">
<strong>{{profile.key}} :</strong> {{profile.doc_count | number:'1.0-2'}}
</div>
</md-card>
当用户 select 的值时它工作得很好,它触发 valueChanges
并链接操作!
所以我很高兴。我认为这是一种优雅的方式,而不是使用 ngOnChanges()
现在我找不到让它工作的方法。基本上,我想用一个值初始化 select 并触发(无需任何用户操作) valueChange
我尝试使用 [(ngModel)] : <select [formControl]="myControl" [(ngModel)]="selectedGroupBy">
但它并没有触发它。
最后,我尝试在方法中自己调用 ngOnInit()
this.getGroupBy(new formatQuery(this.selectedGroupBy.value), this.url)
.subscribe((response) => {
this.profilesBy = response.json().aggregations.group_by_type.buckets;
});
但我得到的是 Array
而不是 Observable of Array
!我想念什么?
我怎样才能让它发挥作用?
可能的解决方案使用startWith
this.profilesBy = this.myControl.valueChanges
.startWith(DEFAULT)
.map(text => new formatQuery(text.value))
.switchMap(body => this.getGroupBy(body, this.url), (_, res)=> res.json().aggregations.group_by_type.buckets);
要以编程方式更改 formControl 的值,您只需调用 setValue()
方法:
setValue(value: any, {onlySelf, emitEvent, emitModelToViewChange, emitViewToModelChange}?: {
onlySelf?: boolean,
emitEvent?: boolean,
emitModelToViewChange?: boolean,
emitViewToModelChange?: boolean
}) : void
Set the value of the form control to value.
所以对于你的情况:this.myControl.setValue(foo)
应该触发 valueChanges
。
可能的解决方案是使用startWith运算符:
this.profilesBy = this.myControl.valueChanges
.startWith(DEFAULT_OPTION)
.map(text => new formatQuery(text.value))
.switchMap(body => ...);
我正在编写一个 angular2 应用程序,但遇到了问题。
首先,我有一个 select 绑定到 formControl
:
export class MyComponent implements OnInit {
profilesBy: Observable<any[]>;
myControl = new FormControl();
constructor(public http: Http) {
this.profilesBy = this.myControl.valueChanges
.map(text => new formatQuery(text.value))
.switchMap(body => this.getGroupBy(body, this.url), (_, res)=> res.json().aggregations.group_by_type.buckets);
}
}
所以,myControl
是 formControl
,profilesBy
是数组的 Observable。
formatQuery
只是使用 select 和 getGroupBy
return 一个 http
请求的值来格式化查询的正文(即:http.post( url, 正文) ... ).
然后我分配响应:res.json().aggregations.group_by_type.buckets
不过这个也别想太多了。
这是我的模板:
<md-card>
<h4>Profiles group by :
<select [formControl]="myControl">
Some options ...
</select>
</h4>
<div *ngFor="let profile of profilesBy | async">
<strong>{{profile.key}} :</strong> {{profile.doc_count | number:'1.0-2'}}
</div>
</md-card>
当用户 select 的值时它工作得很好,它触发 valueChanges
并链接操作!
所以我很高兴。我认为这是一种优雅的方式,而不是使用 ngOnChanges()
现在我找不到让它工作的方法。基本上,我想用一个值初始化 select 并触发(无需任何用户操作) valueChange
我尝试使用 [(ngModel)] : <select [formControl]="myControl" [(ngModel)]="selectedGroupBy">
但它并没有触发它。
最后,我尝试在方法中自己调用 ngOnInit()
this.getGroupBy(new formatQuery(this.selectedGroupBy.value), this.url)
.subscribe((response) => {
this.profilesBy = response.json().aggregations.group_by_type.buckets;
});
但我得到的是 Array
而不是 Observable of Array
!我想念什么?
我怎样才能让它发挥作用?
可能的解决方案使用startWith
this.profilesBy = this.myControl.valueChanges
.startWith(DEFAULT)
.map(text => new formatQuery(text.value))
.switchMap(body => this.getGroupBy(body, this.url), (_, res)=> res.json().aggregations.group_by_type.buckets);
要以编程方式更改 formControl 的值,您只需调用 setValue()
方法:
setValue(value: any, {onlySelf, emitEvent, emitModelToViewChange, emitViewToModelChange}?: { onlySelf?: boolean, emitEvent?: boolean, emitModelToViewChange?: boolean, emitViewToModelChange?: boolean }) : void
Set the value of the form control to value.
所以对于你的情况:this.myControl.setValue(foo)
应该触发 valueChanges
。
可能的解决方案是使用startWith运算符:
this.profilesBy = this.myControl.valueChanges
.startWith(DEFAULT_OPTION)
.map(text => new formatQuery(text.value))
.switchMap(body => ...);