Question

我有一个通过以下步骤定义的问题：

我通过@input将值从父级传递给孩子
我的孩子将此@input绑定到输入元素
我通过事件发射器将更改后的值传回给父级
我的父母捕获了此事件并传递给函数。
函数意识到输入无效，并将值改回有效值
此更改后的值通过@input传递回孩子
我重复这些步骤
但是我的函数现在将值更改回其先前@input上的值，因此子组件不会接管更改，并且我的父级和子级现在不同步并保持这种方式，直到我输入再次设为有效值。

我在这里创建了一个堆栈闪电来说明此问题。 https://stackblitz.com/edit/angular-kbpx7r如果您输入99，然后再次输入99，您将看到父母和孩子不同步。您可以输入10以下的任意数字以使它们恢复同步，但是我的问题是我需要弄清楚如何始终保持它们同步。

Answer 1

因此，您的问题如下：

第二次调用99时，parentValue始终设置为5。

所以对于孩子来说，没有变化。目前没有任何通过ngOnChanges的操作。

这就是为什么孩子第二次没有得到5。

尽管要确认我的意思，您可以测试：

if(newValue.value > 10){ 
  this.parentValue = 4;
  this.parentValue = 5;
}else{
  this.parentValue = newValue.value;
}

然后您将打两个电话，然后进行更改。

Answer 2

我在子组件的输入字段中添加了（更改）事件，并且看到它按预期运行。我看到之前未检测到更改。（更改）事件现在对其进行跟踪。请尝试并分享反馈/建议。

child.component.html

<p>
  Keep Number under 10<br>
<input id="{{id}}" [(ngModel)]="value" (blur)="emitValue($event)" (change)="emitValue($event)" type="text"><br>
The child value is: {{value}}
</p>

父母更改值后，Angular 7不会更新孩子

2 个答案: