我正在编写一个angular2应用程序,但遇到了麻烦. 首先,我有一个select绑定到formControl:
I'm writing an angular2 application and I'm stuck with something. First of all, I have a select which is bind to a 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返回一个http请求(即:http.post(url,body)...). 然后,我分配响应:res.json().aggregations.group_by_type.buckets 但是不要对此考虑太多.
so, myControl is the formControl, and profilesBy is an Observable of array. The formatQuery just format a body for the query using the value of the select and getGroupBy return an http request (ie : http.post(url, body) ... ). Then I assign the response : res.json().aggregations.group_by_type.buckets But don't give too much thought about this.
这是我的模板:
<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>当用户选择一个值时,它工作得很好,它会触发valueChange并链接动作!
And it works just fine when the user select a value, it triggers the valueChange and chain the actions !
所以我对此感到满意.我认为这是一种优雅的方法,而不是使用ngOnChanges()
So I'm happy with it. I think this is an elegant way to do so, instead of using ngOnChanges()
现在这是我找不到使它起作用的方法的地方.基本上,我想使用一个值初始化选择并触发(无需任何用户操作)valueChange
Now here is where I can't find a way to make it works. Basically, I want to intialize the select with a value and trigger (without any user action) the valueChange
我尝试使用[[ngModel)]:<select [formControl]="myControl" [(ngModel)]="selectedGroupBy"> 但这并没有触发它.
I tried to used [(ngModel)] : <select [formControl]="myControl" [(ngModel)]="selectedGroupBy"> but it didn't trigger the it.
最后,我尝试使用方法ngOnInit()
Last, I tried to make the call myself in the method 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!我想念什么? 我该如何运作?
But I got a Array instead of an Observable of Array ! What do I miss ? How can I make it work ?
感谢您阅读本主题,也为英语不好对不起!
Thank you for reading this topic, sorry for the bad english too !
可能的解决方案: 1)使用 startWith
Possible solutions : 1) using 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);推荐答案
可能的解决方案是使用 startWith 运算符:
The possible solution is to use startWith operator:
this.profilesBy = this.myControl.valueChanges .startWith(DEFAULT_OPTION) .map(text => new formatQuery(text.value)) .switchMap(body => ...);更多推荐
触发值更改为初始化值
发布评论