Question

我正在写一个angular2应用程序而且我遇到了一些问题。首先，我有一个绑定到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
但是不要过多考虑这个。

这是我的模板：

<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()

现在，我无法找到使其有效的方法。基本上，我想用值初始化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！我错过了什么？我怎样才能使它工作？

感谢您阅读本主题，对不起英语也很抱歉！

可能的解决方案： 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);

Answer 1

可能的解决方案是使用startWith运算符：

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

Answer 2

要以编程方式更改formControl的值，您只需调用setValue()方法：

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

将表单控件的值设置为value。

因此，对于您的情况：this.myControl.setValue(foo)应触发valueChanges。

触发值更改为初始值 - angular2

2 个答案: