Events Angular2-使用Redux和单向数据流时在重新渲染时丢失DOM事件

我不确定用什么最好的方式来表达标题，但希望描述能澄清

我有一个Angular2组件，它使用Redux进行状态管理。 该组件使用

*ngFor

来呈现一组带有如下按钮的小输入。“状态”是这样的

//掩饰我是如何从Redux商店得到这个的，
//但是假设我们有一个不可变的.js值列表，就像这样。。。
让items=Immutable.fromJS（[{value:foo}，{value:bar}，/*…etc*/}）

模板呈现的是这样的

<input *ngFor="let item of items, let i = index" 
       type="text" 
       value="item.get('value')"
       (blur)="onBlur($event, i)">
<button (click)="onClick($event)">Add New Input</button>

并且reducer会更新该值（使用Immutable.js）：

案例“更新值”：{
让index=getIndex（action.value.index）；//action.value.newValue）；
}

状态已更新，因此将使用更新的值重新呈现组件

单击输入旁边的按钮时，将触发

onClick（$event）

回调，该回调将调度不同的redux操作（即：

“ADD\u VALUE”

），更新状态，并使用新的空白输入和按钮重新呈现组件

当输入被聚焦（编辑）且用户单击按钮时，会出现问题。用户本打算单击按钮，但由于他们碰巧聚焦在字段上，因此其行为不符合预期。

（模糊）

事件首先被触发，因此会触发input onBlur回调，调度redux操作，更新状态，重新呈现组件。但是，按钮

（单击）

丢失，因此不会创建新的输入

问题： 是否有方法跟踪单击事件并在重新渲染后触发第二个操作？或者，是否有方法以某种方式链接重新渲染操作，使其在重新渲染前按顺序发生？

旁注-我尝试更改

（单击）

事件以使用

（鼠标向下）

，该事件在

（模糊）

之前触发，但这导致Angular（在devMode中）抱怨组件的

@输入在检查后发生了更改（状态在更改检测周期中发生了更改）.我还没有深入研究这个问题。我希望能找到一个解决方案，使用点击和模糊

谢谢！
您是否在
onBlur（$event）
中修改了用于
*ngFor
的数组？数组是什么样子的？能否显示一些代码，演示
onBlur（）
和
onClick（）的内容
do？@GünterZöchbauer-我刚刚添加了一些示例代码。但真正重要的是，模糊和单击都会导致redux存储状态发生更改，因此Angular2的更改检测被触发，组件被重新渲染（在处理另一个事件之前）。我更关心的是在重新渲染过程中跟踪用户交互事件的更广泛想法（如果可能的话）。或者，如果有人能提出一种不同的方法来处理交互或组件层次结构，从而完全避免问题，那也太好了。如果发出了相同的数组实例，那么*ngFor就不应该重新渲染。我不知道Redux的核心部分之一是不可变的，所以每次状态改变时，它都会创建一个新的如果状态的给定部分没有任何更改，它将指向同一引用，但在这里-数组将是一个新的引用，并进行更新，因此它应该重新呈现。