角2：使用ngIf内ngFor不工作

我有以下ngFor循环：角2：使用ngIf内ngFor不工作

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

打印出以下几点：

Greens 
Greens 
Greens 
Fruits

我想它不打印重复的，因此代替（在这种情况下），我想打印出来：

Greens 
Fruits

The 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

以下是错误消息：

无法读取的不确定

来源

2016-10-19 Brett

我认为@Gunter是正确的。你正在使用'让各种各样的品种'，但你把它混淆为C风格的循环。这里你不需要索引，但是如果你想使用它，那么应该使用'variety [i]'，因为后者是你的集合，而前者是集合中的一个对象。 –

试试这个

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

来源

2016-10-19 17:55:08

这不打印出VarietyTypeName的任何实例 – Brett

我改变了你放到* ngIf =“VariesTypeName！= variety [i - 1]的内容。VarietyTypeName“，它现在可以工作，”？“的意思是什么？ – Brett

@Brett我认为这是最优雅的答案（尽管它有你已经修复的bug），'object？.property'告诉Angular只有当对象是真实的（不是'null'或'undefined'）才能读取属性 – BeetleJuice

我猜财产 'VarietyTypeName' 它应该是

<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

来源

2016-10-19 17:54:45

这给了我以前得到的同样的错误。 – Brett

你应该在控制器内部做这种逻辑。

过滤数组中的所有重复项，然后只是对它进行迭代。

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

现在你可以在*ngFor新创建filteredVarieties

来源

2016-10-19 17:56:46

如果我像控制器一样照顾它，性能会更好吗？ – Brett

我不认为性能会有很大的不同曼斯。我们的计算机足够强大，足以快速处理这些小任务，所以我建议专注于编写更易读的代码。你可以将'.filter'封装在一个名为'removeDuplicates'的函数中，并且每个新开发者都会立即理解代码的作用。 –

在这种情况下，你可能需要使用管道迭代之前过滤值。我将演示一个简单的管道，可能会有所帮助。 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添加到您的供应商档案。

来源

2016-10-19 20:26:42 koech

角2：使用ngIf内ngFor不工作

回答

相关问题