在数组上设置值，它不会更新子组件 - Angular答案

【问题标题】：Setting value on array, it is not updating child component - Angular在数组上设置值，它不会更新子组件 - Angular
【发布时间】：2021-11-13 20:36:47
【问题描述】：

我试图防止三重值并处理父组件中的逻辑。但是，它成功地阻止了第 3 个值一次，但不是后续的时间。问题是在数组上设置值时，它没有更新子组件。我试图理解为什么它在随后的时间里表现不一样......

【问题讨论】：

【解决方案1】：

问题是第二次以后 Input 属性没有变化。

您正在将相同的值（即空字符串文字 oValues[oNumber] = '';）重新分配给数组中的属性。

例如对于 oValues[3]

第一个变化：上一个值 = '2'，新值 = ''

这里 Angular 变化检测检测 Input 属性的变化。

第二次更改：旧值 = ' '，新值 = ' '

这里 Angular 变化检测不检测 Input 属性值的变化。

所以基本上只有当它发现 Input 属性值发生变化时，Angular 变化检测才会触发。

【讨论】：

好的。因此，如果它没有检测到任何更改，为什么要对 DOM 进行更改，即更新文本框中的值？不应该留空吗？
否，因为您在文本框中输入了一个值，然后使用 Output() 在更改事件中将其传递给父组件。如果您只想使用 Input() 更新值，则必须明确清除文本框。
另外，event.preventDefault() 不起作用，因为 change 事件不可取消。 stackoverflow.com/questions/24251955/….
No, because you are entering a value in the textbox and then passing the same on the change event using Output() to the parent component. You have to explicitly clear the textbox if you want the value only to be updated using Input()。我无法理解这个解释。因为，如果它没有检测到模型的变化，它也不应该更新 UI/DOM。
你在哪里限制 DOM 更新？一旦您在文本框中输入值，您的 DOM 就会更新。它第一次起作用的原因是 @Input 值会根据您在父组件中的逻辑而变化。您的子组件的 @Input 收到一个新值，它会再次更新 DOM。再次成为这里的关键词。当@Input 没有收到新值时，DOM 不会更新，您会首先看到您输入的值。