Question

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

export class MyClass {
  name: Object;
}

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

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

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

我是否必须在item内定义所有这些内容？如果我尝试仅拨打MyClass（item: MyClass;），我会undefined error。

有更好的方法吗？

Answer 1

一些事情：

（1）避免使用Object作为类型，noted in the docs：

任何类型都是使用现有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 }
});

Answer 2

MyClass 中的名称属性是对象的类型，如果您想在名称中定义自定义属性，然后创建一个单独的类，如 NameClass

class NameClass { 
  en: string;
  otherProp: any
}

然后在 MyClass

中使用它

class MyClass {
  name: NameClass
}

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

如果打字稿代码item: MyClass;转换为 JS ，您只会看到var item;的行未定义。

希望它有所帮助。

双向绑定嵌套对象

2 个答案: