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将始终在数组中组合在一起，因此如果有多个绿色，它们将始终一个接一个地出现。我可以在循环内部使用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

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

在角度2中一如既往地导入管道之后，就可以使用模板代码了

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

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

Angular 2：在ng中使用ngIf不工作

4 个答案: