Question

我是Angular的初学者。目前我正在开发一个HTML部分，其中一些数据绑定到一个下拉列表。我的代码如下所示

 <option *ngFor="let types of Customtype" [value]="taxtype">{{Customtype}}</option>

我需要根据某些条件显示＆＃34;类型

例如type = 1如果TestCompanyA显示为type =2，TestCompanyB则显示type = 3，TestCompanyC然后ngIf。

是否可以通过{{1}}条件来实现这一目标？

Answer 1

* ngIf 是一个充分的解决方案，但如果您有两个以上的条件，我建议使用ngSwitch。

如果您不想使用额外标签，可以使用自定义ng-container标签，f.e：

<option *ngFor="let record of records" [value]="record.taxtype" [ngSwitch]="record.type">
    <ng-container *ngSwitchCase="1">TestCompanyA</ng-container >
    <ng-container *ngSwitchCase="2">TestCompanyB</ng-container >
    <ng-container *ngSwitchCase="3">TestCompanyC</ng-container >
    <ng-container *ngSwitchCase="4">TestCompanyD</ng-container >
</option>

来自angular-university.io

正如我们所看到的，ng-container指令为我们提供了一个元素我们可以将结构指令附加到页面的一部分，无需为此创建额外的元素。

Answer 2

如果改进模型数据结构，模板将更简单。所有选项元素都具有相同的[value]="taxtype"，这似乎很奇怪。这意味着用户选择的内容并不重要，将使用表单提交相同的值。我会将我需要的所有内容添加到CustomTypes数组中：

CustomTypes = [
  {type:1, cpy:'TestCompanyA', value:'whatever you want'},
  {type:2, cpy:'TestCompanyB', value:'value for this type'},
  {type:3, cpy:'TestCompanyC', value:'...or for this company'},
];

然后在你的模板中：

<option *ngFor="let item of CustomTypes" [value]="item.value" [label]="item.cpy"/>

如何处理ngFor中的多个条件

2 个答案: