我有一个角度材质选择组件,我想将下拉列表的选定值绑定到firebase的一个Observable of
scalar.我想在不打开组件中的observable的情况下这样做.它看起来我无法使用异步管道绑定值.下面的代码抛出一个异常,因为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); } }) );
你正在使用双重绑定,你不能用管道异步它,它只适用于组件中的变量,下面的代码应该工作,注意我将[(值)]改为[值]所以它将从可观察的| 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>
希望能帮助到你
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。