这么写会报错Only one structural directive can be applied
时间: 2024-03-28 16:41:46 浏览: 108
非常抱歉,我的回答有误。您在 `*ngFor` 和 `*ngIf` 上都使用了结构型指令,但每个元素只能应用一个结构型指令,因此会导致错误。为了解决这个问题,您可以使用 `ng-container` 元素来包装条件判断和循环遍历。代码如下:
```
<ng-container *ngFor="let customerOption of customersSharedCollection; trackBy: trackCustomerById">
<ng-container *ngIf="customerOption.customerType === 'SUPPLIER'">
<option
[ngValue]="customerOption.id === editForm.get('customer')!.value?.id ? editForm.get('customer')!.value : customerOption"
>
{{ customerOption.name }}
</option>
</ng-container>
</ng-container>
```
在这个代码中,我们使用了两个 `ng-container` 元素来包装条件判断和循环遍历。首先,我们使用外层的 `ng-container` 遍历 `customersSharedCollection` 数组,然后在内层的 `ng-container` 中进行条件判断,只有当 `customerOption.customerType` 为 `SUPPLIER` 时才显示 `option` 元素。这样就可以实现只有当 `customerOption` 中的 `customerType` 属性为 `SUPPLIER` 时才显示 `customerOption.name`。