返回 NaN 或什么都不返回的角度数据绑定答案

【问题标题】：Angular data binding returning NaN or nothing返回 NaN 或什么都不返回的角度数据绑定
【发布时间】：2021-05-13 09:05:31
【问题描述】：

我有一个输入，在保存之前，我希望输入显示 AB 的值，然后我用名称计数保存这个值，保存后，我运行 fucntionA，并将计数设置为 5。但我是结果不断得到 NaN，我还尝试在 html 输入标记中添加 type="number"，然后它只在输入字段内显示空字符串。

html文件

<input type="number" [readonly]="true" class="abc" name="account" id="acc" [value]="A-B"  [(ngModel)]="count"/>

ts 文件

functionA(){
   this.count = 5;
   console.log(this.count); //5
   console.log(this.A - this.B); //5
}

【问题讨论】：

[(ngModel)] 是双向绑定，所以你根本不需要[value]="A-B"。该值将始终为this.count
@JeremyThille 但在我保存之前，我想显示值 A-B，而 A 是一个输入值，所以它会使计数动态化。
您不能有 both 将值设置为 count 的双向数据绑定，以及将值设置为 @ 的单向数据绑定987654327@同时。这是简单的常识。恐怕你必须找到另一个设置。

【解决方案1】：

你不能有双向绑定和输入值。

你可以为你的 html 试试这个：

<input type="number" [readonly]="true" class="abc" name="account" id="acc" [(ngModel)]="difference"/>

这适用于您的 .ts：

functionA(){
   this.count = 5;
   this.difference = this.A - this.B;
}

如果不查看其余代码，很难理解您要执行的操作，但您可以有一个变量来保存计数，另一个变量来保存差值，并将差值绑定到输入。

【讨论】：