2016-10-19 142 views
1

我有以下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 

以下是錯誤消息:

無法讀取的不確定

+0

我認爲@Gunter是正確的。你正在使用'讓各種各樣的品種',但你把它混淆爲C風格的循環。這裏你不需要索引,但是如果你想使用它,那麼應該使用'variety [i]',因爲後者是你的集合,而前者是集合中的一個對象。 –

回答

3

試試這個

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

這不打印出VarietyTypeName的任何實例 – Brett

+0

我改變了你放到* ngIf =「VariesTypeName!= variety [i - 1]的內容。VarietyTypeName「,它現在可以工作,」?「的意思是什麼? – Brett

+2

@Brett我認爲這是最優雅的答案(儘管它有你已經修復的bug),'object?.property'告訴Angular只有當對象是真實的(不是'null'或'undefined')才能讀取屬性 – BeetleJuice

1

我猜財產 '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 
+0

這給了我以前得到的同樣的錯誤。 – Brett

2

你應該在控制器內部做這種邏輯。

過濾數組中的所有重複項,然後只是對它進行迭代。

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

現在你可以在*ngFor新創建filteredVarieties

+0

如果我像控制器一樣照顧它,性能會更好嗎? – Brett

+1

我不認爲性能會有很大的不同曼斯。我們的計算機足夠強大,足以快速處理這些小任務,所以我建議專注於編寫更易讀的代碼。你可以將'.filter'封裝在一個名爲'removeDuplicates'的函數中,並且每個新開發者都會立即理解代碼的作用。 –

0

在這種情況下,你可能需要使用管道迭代之前過濾值。我將演示一個簡單的管道,可能會有所幫助。 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添加到您的供應商檔案。