雙向綁定嵌套對象

Question

我的Angular2應用中有以下課程：

export class MyClass {
  name: Object;
}

名稱對象具有動態屬性以加載當前語言。 當前，當我想進行雙向綁定時，我正在執行以下操作：

item: MyClass = {
  name: { en: string }
}

這樣，在我的HTML中，我只使用[(ngModel)]="item.name.en" 。 但是，我在該類中還有許多其他屬性。

我是否必須在item內部定義所有這些對象？ 如果我僅嘗試調用MyClass （ item: MyClass; ）， item: MyClass;得到undefined error 。

有更好的方法嗎？

Answer 1

一些東西：

（1）避免使用docs中所述的 Object作為類型：

any類型是使用現有JavaScript的強大方法，可讓您在編譯過程中逐步選擇加入和選擇退出類型檢查。
您可能希望Object像其他語言一樣扮演相似的角色。 但是Object類型的變量僅允許您為其分配任何值-您不能在它們上調用任意方法，即使是實際存在的方法

因此，最好與any一起使用：

export class MyClass {
    name: any;
}

但是隨后您失去了打字稿為您提供的類型安全性功能（與使用Object相同），為什么不這樣做：

export class MyClass {
    name: { [language: string]: string };
}

（2）這樣做：

item: MyClass = {
    name: { en: string }
}

有問題的是，它不會創建MyClass的新實例，而是僅創建具有相同屬性的對象（之所以編譯時沒有錯誤是因為“打字稿基於結構子類型化” ）。

如果要創建實例，則：

item = Object.assign(new MyClass(), {
    name: { en: string }
});

或者，您可以創建一個構造器來填充數據：

export class MyClass {
    name: { [language: string]: string };

    copnstructor(name: { [language: string]: string }) {
        this.name = name;
    }
}

item = new MyClass({
    name: { en: string }
});

Answer 2

MyClass中的name屬性是Object的類型，如果要在name中定義自定義屬性，則創建一個單獨的類，例如NameClass

class NameClass { 
  en: string;
  otherProp: any
} 

然后在MyClass中使用它

class MyClass {
  name: NameClass
}

第二件事，當您創建像這樣的對象時item: MyClass; 那只是一個空變量 那里什么都沒有分配。

如果打字稿代碼item: MyClass; 轉換為JS后，您將看到該行為var item; 這是未定義的 。

希望能幫助到你。