变化检测和材料 2

Question

在我的Plunk 中，我有一个带有两个按钮和一个输入字段的父组件。第一个按钮将设置一个标志以显示一个子组件，该子组件将获取父元素的表单组。它通过“必需”验证向该表单组添加另一个输入字段。

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

<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 中的错误，原因是：表达式已更改 检查后。以前的值：“假”。当前值：'true'。

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

1. 为什么会这样？
2. 我怎样才能摆脱这个错误？

Answer 1

因为单击按钮会触发一个事件，从而触发 formGroup，并将第二个按钮上的 disabled 属性设置为 true。这一切都发生在一个变化检测周期内，这意味着一个值在周期内发生了变化。这通常是不良做法的标志。设置更改后，您可以考虑使用不同的结构或实现ChangeDetectionRef 和detectChanges：

只显示相关代码

private show: boolean;

constructor(private changeRef: ChangeDetectorRef) {}

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

working plnkr