使用初始化值触发 valueChange - angular2

Question

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

Answer 1

要以编程方式更改 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。

Answer 2

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

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

使用初始化值触发 valueChange - angular2

Trigger valueChange with Initialized value - angular2

angular

rxjs

observable

valuechangelistener

ngoninit