如何處理ngFor中的多個條件

我是Angular的初學者。目前我正在處理HTML部分，其中一些數據綁定到一個下拉列表。我的代碼看起來像下面如何處理ngFor中的多個條件

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

我需要顯示基於一些condtion

爲如「類型」如果type = 1它應顯示爲TestCompanyA，type =2然後TestCompanyB，type = 3然後TestCompanyC。

是有可能把ngIf的條件做到這一點？

來源

2017-09-25 Jithin j

* ng如果是一個足夠的解決方案，但我建議ngSwitch，如果你有兩個以上的條件。

如果你不想使用額外標籤，你可以使用自定義NG-容器標籤，FE：

<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-容器指令爲我們提供了一個元素，我們可以將結構指令附加到頁面的一部分，而不必爲此創建額外的元素。

來源

2017-09-25 10:36:48

如果您改進模型數據結構，模板將會更簡單。看起來很奇怪，所有的選項元素都有相同的[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"/>

來源

2017-09-25 10:58:46 BeetleJuice

如何處理ngFor中的多個條件

回答

相關問題