angular - 组件更改自身时如何避免表达式 "changed after checked"错误

Question

我有一个需要处理 chrome 表单填充的下拉组件。换句话说，它应该切换到与表单填充值匹配的项目。

我让它工作，但匹配导致以下错误:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: {
  "name": "Testy McTester",
  "street": "14 15th Street",
  "city": "Cornfield",
  "state": ""
}'. Current value: 'null: {
  "name": "Testy McTester",
  "street": "14 15th Street",
  "city": "Cornfield",
  "state": "KS"
}'.

示例代码:https://stackblitz.com/edit/reactive-form-fill-dropdown

问题出在本节:

ngAfterViewChecked(): void {
  // Formfilling may have put a value into the input
  const nativeValue = this.inputField && this.inputField.nativeElement && this.inputField.nativeElement.value;
  if (nativeValue !== this.value) {
    const matchingOption = this.allStates.find(opts => opts && (opts.abbr === nativeValue || opts.name === nativeValue));
    if (matchingOption) {
      // This causes Changed after Checked Error
      this.writeValue(matchingOption.abbr);
    }
  }
  return;
}

让 Angular 知道组件已更改自身并且需要在更改后运行另一遍的推荐方法是什么？

搬家this.writeValue(matchingOption.abbr);在 setTimeout() 内部有效，但似乎是个坏主意。

Answer 1

所以你不应该调用writeValue里面 ngAfterViewChecked .从您的评论中您知道这是 Change after checked 的原因错误。

你可以做的是使用二传手:

 set value(val) {
    this._value = val;
    this.onChange(val);
  }

为了让 Angular 知道组件已经改变了自己，你可以在 上使用 2-way 绑定(bind)。值(value) 自定义下拉组件中的变量。
像:

 <input #input [id]="controlId" [(ngModel)]="value" type="text" style="border:none; outline:none"/>

现在它似乎工作了。
在这里查看:https://stackblitz.com/edit/reactive-form-fill-dropdown-2dzzzr