如何在Angular ngrx中為select元素設置初始值？

Question

在 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？

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