Angular 2：在ngFor內部使用ngIf不起作用

Question

我有以下ngFor循環：

<div *ngFor="let variety of varieties; let i=index">
    <div class="varietyTypeName">
        {{variety.VarietyTypeName}}            
    </div>
</div

打印出以下內容：

Greens
Greens
Greens
Fruits

我希望它不打印重復，所以（在這種情況下）我希望它打印出來：

Greens
Fruits

VarietyTypeNames將始終在數組中分組在一起，因此，如果有多個Green，它們將總是一個接一個地排列。 我可以只使用一個ngIf循環內，基本上只是告訴它只能顯示VarietyTypeName如果它不等於先前VarietyTypeName ？

我嘗試在下面實現該邏輯，但出現錯誤。 我究竟做錯了什么？

<div *ngFor="let variety of varieties; let i=index">
    <div *ngIf="variety[i].VarietyTypeName != variety[i - 1].VarietyTypeName" class="varietyTypeName">
        {{variety.VarietyTypeName}}
    </div>
</div

這是錯誤消息：

無法讀取未定義的屬性“ VarietyTypeName”

Answer 1

嘗試這個

<div *ngFor="let variety of varieties; let i=index">
    <div *ngIf="variety.VarietyTypeName != varieties[i - 1]?.VarietyTypeName" class="varietyTypeName">
        {{variety.VarietyTypeName}}
    </div>
</div

Answer 2

您應該在控制器內部執行這種邏輯。

從數組中過濾所有重復項，然后簡單地對其進行迭代。

let filteredVarieties = varieties.filter((variety, index) {
    return varieties.indexOf(variety) == index;
});

現在，您可以*ngFor在新創建的filteredVarieties

Answer 3

我想應該是

<div *ngFor="let variety of varieties; let i=index">
    <div *ngIf="variety.VarietyTypeName != i == 0 ? 0 : varieties[i - 1].VarietyTypeName" class="varietyTypeName">
        {{variety.VarietyTypeName}}
    </div>
</div

Answer 4

在這種情況下，您可能需要使用管道對值進行迭代之前對其進行過濾。 我將演示一個可能有用的簡單管道。 注意：我將使用庫lodash簡化示例。

import { Pipe, PipeTransform } from '@angular/core'; import * as _ from 'lodash'; @Pipe({ name: 'filter' }) class FilterPipe { transform(input: any, term: any) { return _.uniqBy(input, term) } }

在導入管道之后，您將始終在angular 2中進行操作，這就是您擁有模板代碼的方式

<div *ngFor="let variety of varieties | filter : 'VarietyTypeName' "> {{variety.VarietyTypeName}} </div

PS記住將lodash添加到您的供應商文件中。