如何在Angular ngrx中设置选择元素的初始值？答案

【问题标题】：How to set initial value for select element in Angular ngrx?如何在Angular ngrx中设置选择元素的初始值？
【发布时间】：2018-02-20 03:55:50
【问题描述】：

在 Angular4/ngrx 中，我们如何在选择框中设置一个值作为选定选项？

这些选项是通过 XHR 加载的。两个选项列表/要选择的值都可以在商店中找到。

这是模板：

  <select class="form-control" (change)="onSelectOperator($event.target.value)">
      <option *ngFor="let operator of operator$ | async">{{operator.name}}</option>
  </select>

商店：

  export const initialState = {
    operators: [], // to be loaded via XHR
    selected: 'All'
  };

组件：

  ngOnInit() {

    this.loadOperators();
    // assign observable
    this.operators$ = this.store.select(getOperators);
  }

加载后，selected 存储中的值应设置为选择框的初始值。这将出现在 XHR 响应列表中。

angular 1 等效项是使用两种方式绑定并将值设置为 ng-model。这如何转化为 Angular4/ngrx？

【问题讨论】：

如果您使用响应式表单将选定的值传递给您的选择框，您应该使用 ngModel 指令或 formControlName

标签： javascript angular ngrx

【解决方案1】：

使用路由守卫来加载值；因此，当您的组件初始化所有状态时，将准备好为您提供组件

canActivate(): Observable<boolean> {
    return this.checkStore().pipe(
      switchMap(() => of(true)),
      catchError((error) => of(false))
    );
  }

  checkStore(): Observable<boolean> {
    this.store.select(fromStore.selectAlbumsLoaded).subscribe((x) => console.log(x));
    return this.store.select(fromStore.selectAlbumsLoaded).pipe(
      tap(loaded => {
        if (!loaded) {
          this.store.dispatch(new fromStore.LoadAlbums());
        }
      }),
      filter(loaded => loaded),
      take(1)
    );

【讨论】：