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管道。因为您订阅了observable，所以不需要再次使用异步管道。

<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">

如何使用async管道表格mat-option值？

1 个答案: