第三个属性级别的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 
}

视图中的项目对象可通过以下方式打印出来：

{{ 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 分配给表单的模板变量（在表单 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 或安全导航操作符 (?)。

---

2. 如果您将 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 指令进行 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>

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

<块引用>

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