Как связать выбранное значение углового раскрывающегося списка с наблюдаемой скалярной величиной? - PullRequest
Новая
       20

Как связать выбранное значение углового раскрывающегося списка с наблюдаемой скалярной величиной?

0 голосов
/ 02 июня 2018

У меня есть компонент выбора углового материала, и я хотел бы привязать выбранное значение раскрывающегося списка к наблюдаемой скаляре из базы данных огня.Я хотел бы сделать это, не разворачивая наблюдаемый компонент.Похоже, я не могу связать значение с помощью асинхронного канала.Приведенный ниже код вызывает исключение, поскольку значение mat-select не может быть привязано к «uiStateSvc.currentClient $ | async». 

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

1 Ответ

0 голосов
/ 05 июня 2018

Вы используете двойное связывание, вы не можете сделать это с асинхронным конвейером, он работает только с переменной в компоненте, код ниже должен работать, обратите внимание, я изменил [(значение)] на [значение], так что это будетчитать из наблюдаемого |async значение по умолчанию для выбора, и для сохранения изменений, которые я вижу, у вас уже есть в 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>

Надеждаэто помогает

...