显示了 Angular ngModel 值，但它为空答案

【问题标题】：Angular ngModel value is shown but it is empty显示了 Angular ngModel 值，但它为空
【发布时间】：2019-02-07 07:36:58
【问题描述】：

ngModel 显示值。但它仍然是空的，因为需要验证检测到它是空的。 当我在值之后添加一个空格时，它可以工作。

获取名称的代码

<div (click)="getName(item.name)"></div>
<input matInput [(ngModel)]="data.name" value="{{name}}">

组件.ts

name: string;
data: Data

getName(nm) {
 this.name = nm;
}

【问题讨论】：

【解决方案1】：

我觉得这样就够了

<input matInput [(ngModel)]="name">

您不应同时使用 [(ngModel)] 和 value 属性。因为[(ngModel)] 的[] 已经定义了输入的值。所以你可以使用(ngModel)和value/[value]/[(ngModel)]

【讨论】：

【解决方案2】：

绑定到ngModel的data.name是什么？

我认为你不需要使用 value 属性将name 组件变量绑定到 ngModel，如下所示

<div (click)="getName('hello')">Click</div>

<input matInput [(ngModel)]="name"> {{name}}

在您的组件中，

name: string;

getName(nm) {
 this.name = nm;
}

点击点击按钮，你会看到输入得到值'hello'

【讨论】：

更新了问题。数据是我需要的模型'name'的值
对不起，我没看懂，所以 Onclick 你要更新 data.name 吗？如果是，则在 getName(nm) 方法中将 this.name 修改为 this.data.name

【解决方案3】：

[(ngModel)] 从 anguler 7 中删除，更好地使用 formcontrall https://next.angular.io/api/forms/FormControlName#use-with-ngmodel

【讨论】：