Javascript 变更检测和材料2

在我的系统中，我有一个具有两个按钮和一个输入字段的父组件。第一个按钮将设置一个显示子组件的标志，该子组件将获取父元素的表单组。它使用“必需”验证将另一个输入字段添加到此表单组

如果使用的表单组无效，则第二个按钮配置为“禁用”：

<form [formGroup]="formGroup">
      <input type="text" [formControl]="formGroup.get('nameParent')" />
      <child *ngIf="show===true" [inputform]="formGroup"></child>
      <button (click)="addChild()">Add child</button>
      <button [disabled]="!formGroup.valid" md-raised-button>Valid</button>
</form>

添加子项
有效的

第二个按钮具有md raised button指令，该指令将其转换为材质按钮。 如果您在输入字段中键入内容，则升起的按钮将变为启用。如果在键入内容后按下“添加子项”按钮，控制台中将出现错误：

app.component.html:4:14中出现错误，原因是：表达式已更改 检查过之后。上一个值：“false”。当前值：“true”

但是等等： 如果现在从按钮中删除md raised按钮以将其用作本机控件，则相同的实验将在没有错误消息的情况下成功。 因此：材料设计组件似乎做了一些事情，导致这种情况发生。任何想法：

为什么会发生这种情况

我怎样才能摆脱这个错误

---

因为单击按钮会触发一个事件，导致触发

formGroup

，并将第二个按钮上的disabled属性设置为

true

。这一切都发生在一个变化检测周期内，这意味着一个值在该周期内发生了变化。这通常是不良习惯的表现。设置更改后，您可以考虑使用不同的结构或实现

changedtectionref

和

detectChanges

：

仅显示相关代码

---

酷！你知道为什么没有md按钮就可以工作吗？：）鼠标事件本身不应该启动更改检测吗？md-raised可能会根据disabled属性在内部触发某些内容。这就是造成这种循环的原因。是的，鼠标事件确实触发了变化检测，但是在这个过程中，发生了另一个变化。这是一件复杂的事情，我自己有时也很难把脑袋绕在它周围

private show: boolean;

constructor(private changeRef: ChangeDetectorRef) {}

addChild() {
  this.show = true;
  this.changeRef.detectChanges();
}