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

Question

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

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

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 个以上的字段，它们都有相同的问题。

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

提前谢谢你。

Answer 1

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

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

我假设您需要做的只是添加? 表格后：

<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

Answer 2

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

1. 不要将ngForm分配给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>

这样，您将能够为 [(ngModel)] 分配一个 3 级嵌套属性，而无需任何 elvis 或安全导航操作符 (?)。

---

2. 如果您将ngForm分配给表单模板变量，那么[(ngModel)]将为 3 级嵌套属性提供undefined ，即使它已经有一些值。 因此，请改用name属性 -

    <form #newItem="ngForm" (ngSubmit)="saveItem(newItem.value);"> <input type="text" name="alarmSystem.wireless" ngModel class="form-control"> </form>

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

---

3. 使用 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>

您也可以参考这个答案 - 在 Angular2 中正确使用 Elvis 运算符用于 Dart 组件的视图

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