Angular 2 Redux不斷在NgFor中重新渲染

我在我的項目中使用NGRX，並且在不斷地重新渲染組件時遇到問題。商店每次產生全新的對象，如果商店數據相同，我不想重新渲染我的組件。我改改呈現組件檢測到ChangeDetectionStrategy.OnPush lodash記憶化（_.memoization），但它不工作的商店Angular 2 Redux不斷在NgFor中重新渲染

export interface CardsState { 
    cardsA: CardA[]; 
    cardsB: CardB[]; 
    cardsC: CardC[]; 
}

然後映射存儲狀態，結構，這個

const entities = [{ 
cards: { 
    cardsB: [ 
    {} 
    ] 
} 
}];

，並試圖的

國家防止每當店鋪通過記錄變更時重新呈現cardsB物品

export const memoizeCardBFunc = _.memoize((cardB: CardB): CardB => { 
    return _.cloneDeep(cardB); 
}, (cardB: CardB) => cardB.entityType + cardB.entityId);

在我的智能組件，我有下一個HTML

<div *ngFor="let entity of entities | async"> 
    <div *ngFor="let cardB of entity.cards.cardsB"> 
     <card-b [cardStateModel]="cardB"></card-b> 
    </div> 
</div>

向我吃驚的是它正確與一個ngFor工作，但如果我有兩個ngFor它不工作！

<div *ngFor="let cardB of entity.cards.cardsB"> 
    <card-b [cardStateModel]="cardB"></card-b> 
</div>

我已經連續2天過了，它會讓我失望，請幫助！

我不是英語母語的人，對錯誤感到抱歉。

謝謝！

來源

2017-06-15 Yaroslav Draga

我不確定你爲什麼或者如何使用_.memoize和_.cloneDeep，但是這聽起來像是你的減速器出了問題。如果您的商店數據保持不變，則不應首先返回新對象。 – matmo

@matmo @Jonnysai這是一個與我的問題https://plnkr.co/edit/gbjdubPeZQXo7j6L3E6w?p=preview的蹲點。不適用於內部ngFor。你可以刪除第一個ngFor和第二個改變到'* ngFor =「讓cardB的實體[0] .cards.cardsB; trackBy：trackByB」'並且它工作。我需要內部ngFor（ –

似乎你需要一個trackBy在外部ngFor – matmo

如果您有：

<div *ngFor="let outer of outers"> 
    <div *ngFor="let inner of outer.inners"> 
     {{ inner }} 
    </div> 
</div>

那麼，如果在某一點outer變化，內ngFor將重新呈現，這就是爲什麼你看到ngOnInit警報。但是，如果將trackBy添加到外部ngFor，並將其識別爲相同的元素，則可以避免內部列表重新呈現，這是您當前的問題。

內部trackBy只保留內部元素，並防止重新創建這些內部元素。外部軌道保留了外部元素，這使得內部元素也有機會被保存。

來源

2017-06-21 20:59:07 matmo

在For循環中使用trackBy。它將跟蹤狀態，以及數據何時改變，而不是觸發重新渲染。

<div *ngFor="let cardB of entity.cards.cardsB;let i = index; trackBy: trackByFn"> 
     <card-b [cardStateModel]="cardB"></card-b> 
    </div> 

trackByFn(index, item) { 
    return index; // or item.id 
    }

閱讀下面的文檔，你會明白更多。 https://v2.angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

來源

2017-06-15 15:01:18 CharanRoot

謝謝你的回答！這個工作很好，當我只有一個ngFor就像這樣'* ngFor =「讓cardB的entities [0] .cards。cardsB;'但它不適用於內部ngFor –

用戶另一個trackBy內部循環。 – CharanRoot

我使用鍵在我的memoization函數'return item.entityId + item.entityType;}'in trackByFn –

Angular 2 Redux不斷在NgFor中重新渲染

回答

相關問題