ngModel 使输入框的预填充停止工作

Question

我有一个 angular 组件，它提供输入框以输入评论。我最初有：

<textarea class="comment-box" type="text" name="comment" value="{{_input.comment}}"></textarea>

这会导致评论框预先填充评论的现有值（如果有的话）。它工作正常。

现在我为 2 种绑定添加 ngModel 为：

<textarea class="comment-box" type="text" name="comment" [ngModel]="comment" (ngModelChange)="handleCommentChange($event)"
          value="{{_input.comment}}"></textarea>

现在修改评论时，会调用组件中的handleCommentChange。它可以工作，但是文本区域的预填充不再工作并且文本区域为空，即使评论在组件加载时具有初始值也是如此。

如何同时拥有这两个功能？

Answer 1

value = {{_input.comment}} 删除此行并 [(ngModel)] = "_input.comment" 更正此行，您的双向绑定应该工作并在 [=15 中导入 ngModel =] 来自@angular\forms 模块 .

Answer 2

为了实现双向数据绑定，它应该有banana in the box语法，即[(ngModel)]。您需要将 ngModel 括在花括号和方括号中。这意味着，事件绑定和属性绑定的组合。

因此，您的代码将如下所示：

  <textarea class="comment-box" type="text" name="comment" [(ngModel)]="_input.comment" (ngModelChange)="handleCommentChange($event)"></textarea>

此外，如果仍然不起作用，请提供您的 handleCommentChange() 方法的代码。

Answer 3

请从

更改

[ngModel]="comment"

至

[ngModel]="_input.comment"

另外我觉得你不需要

value="{{_input.comment}}"

ngModel 使输入框的预填充停止工作

ngModel makes prepopulation of input box stop working

textarea

ngmodel

angular