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总是会在数组中组合在一起，所以如果有多个Greens，他们总是一个接一个地来。我可以只在循环内部使用 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 != i == 0 ? 0 : varieties[i - 1].VarietyTypeName" class="varietyTypeName">
        {{variety.VarietyTypeName}}
    </div>
</div

Answer 2

试试这个

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

Answer 3

你应该在你的控制器中执行那种逻辑。

从数组中过滤所有重复项，然后简单地对其进行迭代。

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

现在您可以 *ngFor 覆盖新创建的 filteredVarieties

Answer 4

在这种情况下，您可能希望在迭代之前使用管道过滤值。我将演示一个可能有用的简单管道。 N.B 我将使用库 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

P.S记得将 lodash 添加到您的供应商文件中。

Angular 2：在 ngFor 中使用 ngIf 不起作用

Angular 2: Using ngIf inside ngFor not working

angular

ngfor