角度数据绑定在值为零时返回NaN

Question

我正在做一些简单的数据绑定：

<input type="text" class="form-control" model="amount">
<label>Your amount is {{amount * 10 }}</label>

但是，最初，当文本输入为空时，它返回NaN。

如何使用Angular阻止这种情况发生？

Answer 1

你可以试试这个：

<input type="text" class="form-control" model="amount">
<label>Your amount is {{ (+amount) * 10 }}</label>

根据定义，HTML文本输入是文本。添加的+会在使用之前将其转换为数字。

Answer 2

使用三元运算符检查你的tempalte中的isNaN，如下所示。

<input type="text" class="form-control" model="amount">
<label>Your amount is {{ (!isNaN(amount)) ?  (amount * 10) : '' }}</label>

Answer 3

您的金额为{{（金额* 10）|| “0”}}

Answer 4

您的金额是

{{ (amount * 10) || "0" }}

这很好。