如何將實體添加到數組中像模型並從商店中獲取索引？

我的狀態模型是如何將實體添加到數組中像模型並從商店中獲取索引？

//for reducer 
export class State { 
    items: Item []; 
} 

export class Item { 
    id: string; 
    name: string; 
    error: any; 
    pending: boolean; 
}

陣列模型的思想是一個部件可以具有其中一個項狀態在時間的時刻顯示（因此第一未決多個地方，第二個有從服務器獲取的名稱還等等）。

爲了添加新項目，我使用類似「ADD_NEW_ITEM」的動作。 Reducer可以將新項目實例推送到items陣列，這不是問題。但是我的組件應該注意什麼的items指數與一些模板的地方綁定到這樣做：

<p *ngIf="(state$ | async).items[0].name">Name is {{(state$ | async).items[0].name}}</p>

但沒有任何可能性的組件從商店得到新的索引ADD_NEW_ITEM立即調度

後

那麼我能解決它嗎？我唯一的想法是組件必須通過ADD_NEW_ITEM操作傳遞一些唯一的id。但我不認爲這是優雅的方式。

更新：我無法使用的原因ngFor這裏是狀態（數組）是共享的，即不僅用於當前活動組件。因此，CMP必須知道aboute「其」實體，由一個

來源

2017-06-21 Mergasov

你能發佈完整的html嗎？ – LLai

@LLai爲了我的回答，在我看來，html足以理解問題。具有重要的細微差別（這就是答案的核心）：cmp如何能夠了解添加項目的**索引**？（組件調度ADD_NEW_ITEM動作並顯示具有適合索引的項目） – Mergasov

我覺得我很困惑。 ADD_NEW_ITEM方法將新項目添加到items數組。爲什麼組件需要知道最後添加的項目的索引？ html可以使用ngFor指令來顯示項目而不是靜態索引值嗎？ – LLai

加入你有2個選擇這裏：

1）如果你真的需要知道最後加入的項目明確，那麼你就需要把它在商店中並將您的控件綁定到它。您的ADD_NEW_ITEM操作會同時更新項目集合和lastItemAdded。然後您的reducer將反過來公開reducer.getLastItemAdded以從商店中獲取它。 2）在你的組件中，你可以實現OnChanges並檢查你的@Input（）項目何時改變，並與舊集合（你在改變對象中有currentValue/lastValue）進行比較，並以這種方式扣除新項目。

ref：https://angular.io/guide/lifecycle-hooks#onchanges

來源

2017-06-21 08:02:16

如何將實體添加到數組中像模型並從商店中獲取索引？

回答

相關問題