Question

我有一个角度材质选择组件，我想将下拉列表的选定值绑定到来自firebase的Observable of scalar。我想这样做而不需要解开组件中的observable。它看起来我无法使用异步管道绑定值。下面的代码抛出一个异常，因为mat-select的值不能绑定到＆＃34; uiStateSvc.currentClient $ |异步＆＃34;

<mat-form-field *ngIf="(store.authorizedClients$ | async)?.length > 0">
  <mat-select [(value)]="uiStateSvc.currentClient$ | async" [compareWith]="compareFn">
    <mat-option *ngFor="let client of store.authorizedClients$ | async" [value]="client"
    (onSelectionChange)="changeCurrentClient($event, client)">
      {{ client.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

我从firebase中提取下拉列表的当前选定值，如下所示：

this.selectedClient$ = this.authSvc.currentUser$.pipe(
      switchMap((x: firebase.User) => {
        if (x != null) {
          return this.afs.doc(`uistate/${x.uid}`).valueChanges().map((y: any) => y.selectedclient);
        } else {
          return Observable.of(null);
        }
      })
    );

Answer 1

你正在使用双重绑定，你不能用管道异步它做它只适用于组件中的变量，下面的代码应该工作，注意我把[（值）]改为[值]所以它会从可观察的|读取async默认值为select，并存储我在mat-option（onSelectionChange）=“changeCurrentClient（$ event，client）中已经有的更改，这应该就够了

<mat-form-field *ngIf="(store.authorizedClients$ | async)?.length > 0">
  <mat-select [value]="uiStateSvc.currentClient$ | async" [compareWith]="compareFn">
    <mat-option *ngFor="let client of store.authorizedClients$ | async" [value]="client"
    (onSelectionChange)="changeCurrentClient($event, client)">
      {{client.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

希望有所帮助

如何将选定的角度下拉值绑定到标量值的Observable？

1 个答案: