如何使用异步管道形式 mat-option 值？

Question

我正在使用 Angular Material 5 处理 Angular 5 项目。在我的一个表单中，我必须从 Web 服务中获取下拉值。这就是我声明表单数据的方式，

formData:Observable<{
    taxList: {
    label: string,
        Value: number
    }[],
    category: {
        label: string,
        Value: number
    }[]
}>;

在ngOnInit我获取数据如下。

this.dataService.getFormData().subscribe((data) => {
    this.formData = data.content;
});

在我的模板中，

<mat-form-field class="common-form-field">
    <mat-select formControlName="taxId">
        <mat-option *ngFor="let tax of (formData.taxList | async)" [value]="tax.value">
            {{ tax.label }}
        </mat-option>
    </mat-select>
</mat-form-field>

我得到在控制台中的错误，Cannot read property 'taxList' of undefined以及InvalidPipeArgument: '[object Object],[object Object]' for pipe 'AsyncPipe' 什么是错误和可能的解决方案？谢谢

Answer 1

取下async管道。由于您订阅了可观察对象，因此无需再次使用异步管道。

<mat-option *ngFor="let tax of formData.taxList" [value]="tax.value">

或者也许你可以制作formData变量Observable

formData : Observable<Array<any>>
ngOnInit() {    
  this.formData = this.dataService.getFormData();
}


<mat-option *ngFor="let tax of formData.taxList | async " [value]="tax.value">