Angular 2 : Using ngIf inside ngFor not working

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

这是错误消息:

Cannot read property 'VarietyTypeName' of undefined

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