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响应列表中。

角度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)
    );

如何在Angular ngrx中为select元素设置初始值？

1 个答案: