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

Question

我已经创建了一个表示用于修改对象细节的表单的组件。对象存在于app.component.ts中

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>

在我到达文本区之前，一切都很好：

<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，因此似乎与表单上的valid属性有关，这是在这里中暗示的。

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

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

但是，只有当item.description不是null时，这才有效。当它是null时，我再次得到错误。

我正在触发另一个子组件对selectedItem的更改，该组件在selectedItem上也具有双向绑定。当用户选择一个项目时，新的Item流到应用程序，然后返回到detail组件。

我读过关于“ExpressionChangedAfterItHasBeenCheckedError”错误您需要知道的一切的文章。引用这篇文章“我不建议使用它们，而是重新设计您的应用程序”。

太棒了！多么?我如何构造事物，以便控件A用于选择Item，而控件B用于编辑它？在不触发此错误的情况下，控制A和B之间对话的正确方法是什么？

Answer 1

这个错误把我逼疯了，它只在升级到角5之后才显露出来。在我的例子中，我不使用[(ngModel)]。我使用textarea仅用于显示目的(获取材料的外观和感觉)。尽管如此，这对于像我这样无休止地搜索的人来说可能是有帮助的。

我发现，如果绑定到textarea的[value]属性而不是使用插值{{}}，错误就会消失。

而不是：<textarea>{{value}}</textarea>

Do：<textarea [value]="value"></textarea>

<input>没有任何问题，因为它是一个单一标记元素，因此必须使用属性绑定而不是插值。(要明确的是，使用插值和value只是必要的，因为您要绑定到一个只计算一次的属性。绑定到[value]，这是一个属性，您不再需要{{}}。请参阅角度文档，其中解释得非常清楚。)

我怀疑通过插值，在第一个摘要循环中将表单设置为false，而在第二个摘要中，当它识别值时将其设置为true。使用[value]属性绑定，它将识别第一个摘要的值。

在任何情况下，它都能工作。

Answer 2

如果您正在使用ngModel，那么{{item.description}}是无用的，应该足够了：

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

Answer 3

万一有人因为同样的问题而发现自己在这里：

首先要检查的是确保[(ngModel)]="value"的使用如文档中所示。如果没有，请确保导入了FormsModule。棱角材料文档忽略了它，但是没有它，ngModel就不能工作。

另见为什么(ngModel)不能工作？