将 [(ngModel)] 绑定到未定义的值答案

【问题标题】：binding [(ngModel)] to undefined value将 [(ngModel)] 绑定到未定义的值
【发布时间】：2020-04-02 21:57:28
【问题描述】：

我有以下 [(ngModel)] 导致错误，因为我没有从后端获取任何值，

   <input type="number" 
          [(ngModel)]="list.test[0]">

在上面的示例中，我没有从后端获取任何测试数组的值，导致错误提示无法读取未定义的属性 0。

我试过[(ngModel)]="list?.test[0]"，但也没有用。

【问题讨论】：

标签： angular typescript binding ngmodel

【解决方案1】：

与 ngModel 的 angular 2-way-binding 不支持安全导航运算符?。

还有一个开放的功能请求： https://github.com/angular/angular/issues/7697

您可以使用以下解决方法： [(ngModel)]="list.test && list.test[0]"

因此，如果有 3 个输入，您的代码应该如下所示：

<form>
<input type="number" name="item1" [(ngModel)]="list.test && list.test[0]">
<input type="number" name="item2" [(ngModel)]="list.test && list.test[1]">
<input type="number" name="item3" [(ngModel)]="list.test && list.test[2]">
</form>

给每个输入一个单独的名称属性是很重要的。

【讨论】：

嗯，我得到了 4-5 个值，它需要放在不同的输入框中。即使没有值出现，我仍然必须显示它们。
所以你有很多输入？并且每个输入显示数组的一个值？
是的，为了简单起见，假设数组有 3 个值，如果我得到一个空数组，我必须显示一个没有值的输入框。
所以一个空数组意味着一个输入（不显示值）？数组中的 3 个项目意味着 3 个输入（每个显示对应的项目值）？
是的，空数组表示3个输入框没有值

【解决方案2】：

请从您的代码中显示更多信息！你的数组看起来怎么样？

<input type="text" name="input" ng-model="list.test" required ng-trim="false">

您的输入是否在表单标签内？

【讨论】：

是的，它在表单中
该数组将具有与任何其他数组 test[1,2,3] 类似的值，并且我将在输入框中填充这些值等...
比你需要添加这样的表单控件属性 [formControl]="name"
在哪里？到输入框？