2016-12-15 74 views
3

我正在寫一個angular2應用程序,我堅持的東西。所有的 首先,我有一個選擇,其結合於formControl觸發valueChange與初始值 - angular2

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); 
    } 
} 

所以,myControlformControl,和profilesBy是可觀察到的陣列組成。
formatQuery只是使用選擇的值格式化機構查詢和getGroupBy返回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> 

而當用戶選擇一個值它工作得很好,它觸發valueChange和鏈條的行動!

所以我很高興與它。我認爲這是一個優雅的方式,而不是使用ngOnChanges()

現在,我無法找到一種方法使其工作。基本上,我想並初始化一個值,觸發選擇(無需任何用戶操作)的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的!我錯過了什麼? 我該如何使它工作?

感謝您閱讀這個話題,遺憾的英語不好呢!


可能的解決方案: 1)使用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); 

回答

4

可能的解決方案是使用startWith操作:

this.profilesBy = this.myControl.valueChanges 
    .startWith(DEFAULT_OPTION) 
    .map(text => new formatQuery(text.value)) 
    .switchMap(body => ...); 
4

以編程方式更改formControl的價值,你只需要調用setValue()方法:

setValue(value: any, {onlySelf, emitEvent, emitModelToViewChange, emitViewToModelChange}?: { 
    onlySelf?: boolean, 
    emitEvent?: boolean, 
    emitModelToViewChange?: boolean, 
    emitViewToModelChange?: boolean 
    }) : void 

套裝將窗體控件的值設置爲值。

因此對於您的情況:this.myControl.setValue(foo)應觸發valueChanges

+0

嗨@ n00dl3,謝謝您的回答。 雖然我不能讓它工作。 構造(公共HTTP:HTTP){ this.profilesBy = this.myControl.valueChanges //.startWith(this.groupBy[0]) .MAP(文本=>新formatQuery(text.value)) 。 switchMap(body => this.getGroupBy(body,this.url),(_,res)=> res.json()。aggregations.group_by_type.buckets); } ngOnInit(){ this.myControl.setValue(this.groupBy [0]); } – ByJC

+0

嗯,我不能編輯我以前的評論... 你知道它爲什麼不起作用嗎? – ByJC

+1

這應該是答案 – avoliva