双向绑定嵌套对象答案

【问题标题】：Two-way binding nested objects双向绑定嵌套对象
【发布时间】：2016-10-30 23:45:51
【问题描述】：

我的 Angular2 应用程序中有以下课程：

export class MyClass {
  name: Object;
}

name 对象具有加载当前语言的动态属性。目前，当我想做双向绑定时，我正在这样做：

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

这样，在我的 HTML 中，我只使用 [(ngModel)]="item.name.en"。但是，我在该类中还有许多其他属性。

我必须在item 中定义所有这些吗？如果我尝试只打电话给MyClass (item: MyClass;)，我会得到undefined error。

有没有更好的方法来做到这一点？

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

一些事情：

(1) 避免使用Object 作为类型，如noted in the docs：

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的新实例，它只创建了一个具有相同属性的对象（它编译没有错误的原因是因为"typescript is based on structural subtyping"）。

如果你想创建一个实例然后：

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 }
});

【讨论】：

【解决方案2】：

MyClass中的name属性是Object的类型，如果你想在name中定义自定义属性，然后创建一个单独的类，例如 NameClass

class NameClass { 
  en: string;
  otherProp: any
}

然后在MyClass中使用它

class MyClass {
  name: NameClass
}

第二件事，当你创建一个像item: MyClass; 这样的对象时，它只是一个空变量。那里没有分配任何内容。

如果 typescript 代码 item: MyClass; 转换为 JS，您只会看到 var item; 行，即 undefined。

希望对你有帮助。

【讨论】：