触发值更改为初始化值

本文介绍了触发值更改为初始化值-angular2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在编写一个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 => ...);