输入值双向数据绑定不使用空字符串更新答案

【问题标题】：Input value two-way data binding not updating with empty string输入值双向数据绑定不使用空字符串更新
【发布时间】：2019-12-29 04:04:14
【问题描述】：

我正在使用 Angular 8.1.3。这是我的 HTML...

<mat-form-field floatLabel="never">
  <input matInput placeholder="Address Line 2" [value]="addressLine2" [disabled]="disableAddressFields">
</mat-form-field>

我的 TypeScript 文件中有以下内容。

addressLine2 = '';

更改为非空字符串会在 HTML 中反映。

this.addressLine2 = 'some value';

但将其设置回空字符串确实 不反映在 HTML 中，尽管 TypeScript 中的值为空 ('')（通过打印到控制台确认）。

this.addressLine2 = '';

似乎一旦在 TypeScript 中设置了非空字符串，设置的空字符串就不会反映在 HTML 中。我有点迷失在这里；任何帮助将不胜感激。

【问题讨论】：

标签： angular typescript angular-material angular8

【解决方案1】：

对于双向绑定，应该是 [(ngmodel)]="addressline2" 而不是 [value]="addressline2"

【讨论】：

如果 OP 正在使用表单，则不会。在 v7 中删除了在 ngForm 中使用 [(ngModel)]。

【解决方案2】：

要使双向绑定起作用，您需要使用[(ngModel)]。导入角度表单添加 [(ngModel)] 到您的代码。

 <input matInput placeholder="Address Line 2" [(ngModel)]="addressLine2" [disabled]="disableAddressFields">

在您当前的代码中，您将input 的值属性绑定到addressLine2，因此它按预期工作。要从输入字段中取回数据，您需要使用 ngModel

  <input matInput placeholder="Address Line 2" [value]="addressLine2" [disabled]="disableAddressFields">

【讨论】：

啊，解决了！谢谢你的详细回答。 :)
@alt255 - 为什么说“在您当前的代码中，您将输入的value 属性绑定到disableAddressFields”？
@ConnorsFan 这是一个错字?。修好了