Question

我的州模式是

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

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

数组模型的想法是一个组件可以有多个位置，其中项目状态正在显示的时刻（因此第一个是待处理的，第二个从服务器获取名称，等等）。

对于添加新项目，我使用类似＆＃34; ADD_NEW_ITEM＆＃34;类型的操作。 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 self。但我并不认为这是一种优雅的方式。

更新：我无法使用ngFor的原因是，状态（数组）是共享的，即不仅适用于当前的活动组件。因此，cmp必须清楚地知道＆＃34;它的＆＃34;实体，由一个

添加

Answer 1

这里有2个选项：

1）如果您确实需要知道明确添加的最后一项，那么您需要将它放在商店中并将控件绑定到它。您的ADD_NEW_ITEM操作将同时更新：项目集合和lastItemAdded。然后，您的reducer将公开reducer.getLastItemAdded以从商店获取它。

2）在组件中，您可以实现OnChanges并检查@Input（）项目何时更改并与旧集合进行比较（您在更改对象中有currentValue / lastValue）并扣除该项目的新项目。

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

如何像模型一样将实体添加到数组并从商店获取索引？

1 个答案: