第三个属性级别中的 Angular2 ngModel 绑定未定义答案

【问题标题】：Angular2 ngModel binding in the third property level gets undefined第三个属性级别中的 Angular2 ngModel 绑定未定义
【发布时间】：2016-09-25 21:49:15
【问题描述】：

我的表单上发生了奇怪的事情，或者我做的不对，让我通过展示我的代码向你解释一下。

我在我的组件中定义了一个表单对象

form = {};

每一行都有一个带有数据的按钮，当您单击它时，它会打开一个模态窗口，并将项目作为参数传递。

<a class="btn btn-warning" (click)="open(item)"><i class="glyphicon glyphicon-pencil"></i></a>

这是触发并打开模态窗口但还将项目对象分配给上面的表单对象的方法：

open = (item: any) => {
    this.inventoryEditModal.open(); //Opens a modal window

    this.form = item; // the assignment 
}

item 对象在视图中可用，可以这样打印出来：

{{ form | json }} // i can see all item properties

模态窗口包含一个表单，用户将在其中编辑项目，所以基本上输入表单字段应该填充项目属性值，但由于某种原因，第三级未定义，我不明白为什么，让我告诉你二级截图

<input type="text" class="form-control" [(ngModel)]="form.alarmSystem" name="wireless">

第三层未定义：

<input type="text" class="form-control" [(ngModel)]="form.alarmSystem.wireless" name="wireless">

此问题仅发生在第三级“object.object.property”。我只显示一个输入字段，但表单包含超过 8 个字段，它们都有相同的问题。

不确定我在这里缺少什么，但从逻辑上讲它应该可以工作。你有没有看到这个问题在这里和那里发生或经历过你自己？

提前谢谢你。

【问题讨论】：

其实第二层是 undefined "cannot read property 'wireless of undefined" = alarmSystem is undefined。你也试过console.log(form.alarmSystem)吗？
是的，我已经尝试过了，所以基本上整个对象在我打印出来时都可以在视图中使用，而且警报系统也是如此。

标签： javascript angular typescript angular2-ngmodel

【解决方案1】：

我不确定它是否对您的情况有帮助，但我的情况非常相似。

帮助我的是使用“安全导航操作符”。

我假设您需要做的只是在 form 之后添加 ?：

<input type="text" class="form-control" [(ngModel)]="form?.alarmSystem.wireless" name="wireless">

文档可以在这里找到：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator

【讨论】：

仅供参考，以供将来参考......安全导航运算符不能与双向绑定中的 ngModel 一起使用。
如何在 Angular 5 中使用它
那个？不能用于 [(ngModel)]

【解决方案2】：

Angular 5 有 3 种可能的解决方案

不要将ngForm 分配给表单的模板变量（在表单HTML 元素中）

不要这样做 -

<form #newItem="ngForm" (ngSubmit)="saveItem(newItem.value);">

相反，这样做 -

    <form (ngSubmit)="saveItem();">
        <input type="text" class="form-control" name="wireless [(ngModel)]="form.alarmSystem.wireless">
        <submit type="submit">Save</submit>
    </form>

这样，您将能够将 3 级嵌套属性分配给 [(ngModel)] 没有任何 elvis 或安全导航运算符 (?)。

如果您将ngForm 分配给表单模板变量，那么[(ngModel)] 将为3 级嵌套属性分配undefined，即使它已经具有一些值。因此，请改用 name 属性 -
```
 <form #newItem="ngForm" (ngSubmit)="saveItem(newItem.value);">
     <input type="text" name="alarmSystem.wireless" ngModel class="form-control">
 </form>
```

现在，在这种情况下，嵌套属性 alarmSystem.wireless 已分配到name 属性将使用ngModel 指令进行双向绑定。并且您可以在事件发射器功能中轻松访问它。

最后使用 elvis 运算符 (?) 的解决方案是 -

这里，同样我们不会在表单模板变量中分配ngForm，虽然不会有任何错误但它不会正确存储输入中输入的值。因此，像这样使用 [ngModel] 和 (ngModelChange) 拆分 2 路数据绑定

<form (ngSubmit)="saveItem();">
    <input type="text" name="wireless" 
                            [ngModel]="form?.alarmSystem?.wireless"
                            (ngModelChange)="form.alarmSystem.wireless=$event" class="form-control">
</form>

你也可以参考这个答案-Correct use of Elvis operator in Angular2 for Dart component's view

但是，我不推荐这种解决方案，因为它会增加很多代码。

【讨论】：