angular – 如何在textarea上使用[(ngModel)]绑定时避免Expressi

export class AppComponent {
  selectedItem: Item;
}

它通过双向绑定传递到app.component.html中的组件,如下所示：

<item-details [(item)]="selectedItem"></item-details>

在组件内,Item的各个字段绑定到输入控件,以允许用户更新数据,例如：

<mat-form-field class=name>
  <input matInput [(ngModel)]="item.name" value="{{item.name}}" required placeholder="Name">
  <mat-error>Item name can not be left blank</mat-error>
</mat-form-field>

一切都很好,直到我到达textarea：

<mat-form-field class="full-width">
  <textarea id=description matInput [(ngModel)]="item.description" placeholder="Description">{{item.description}}</textarea>
</mat-form-field>

它工作,但它抛出一个例外：

ExpressionChangedAfterItHasBeenCheckedError

该错误并未直接与< textarea>相关联,因为它表示该值从false变为true,因此似乎与表单上的有效属性相关,如here所示.

有趣的是,我可以通过修改< textarea>< / textarea>的内容来避免错误.例如在内容后面加一个空格：

<textarea ...>{{item.description}} </textarea>

但是只有当item.description不为null时才有效.当它为null然后我再次得到错误.

我正在从另一个子组件触发对selectedItem的更改,该组件也对selectedItem具有双向绑定.当用户选择项目时,新项目将向上流向应用程序,然后返回到详细信息组件.

我看过Everything you need to know about the ‘ExpressionChangedAfterItHasBeenCheckedError’ error文章.引用文章“我不建议使用它们,而是重新设计您的应用程序”.

大！怎么样？如何构造事物以便控件A用于选择项目,控件B用于编辑它？控件A和B在没有触发此错误的情况下相互通信的正确方法是什么？