第三個屬性級別中的 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 組件的視圖

但是，我不推薦這個解決方案，因為它增加了很多代碼。