尝试使用 ngModel 将对象绑定到模板时出错？

Question

这应该是一件容易的事，但我想不出哪里出了问题。

我的 class 中有这个：

interface Message {
  type:  string;
  email: string;
}

export class MyClass {
  public message: Message;
  public email: string;

  constructor() { }

  // ...
}

如果我绑定电子邮件变量它就可以工作 ([(ngModel)]='email') 但如果我尝试绑定消息 [(ngModel)]='message.email' 我收到一个错误：Cannot read property 'email' of undefined. 为什么不能 angular 到达我的对象变量？

Answer 1

您需要实例化您的 message 属性才能将输入绑定到其属性之一：

export class MyClass {
  public message: Message = { type: '...', email: '...'};
  public email: string;

  constructor() { }

  // ...
}

编辑

在你的例子中，Message 是一个接口，所以你不能用它来实例化这种类型的对象。您需要使用文字对象表达式来实例化 Message 类型的对象。 TypeScript 将检查文字对象是否包含所有必需的元素。

如果要实例化类型，需要创建一个class。接口在编译代码中没有对应关系，class有。

这是一个示例：

export class Message {
  constructor(public type: string, public email: string) {
  }
}

export class MyClass {
  public message: Message = new Message('type', 'email');
  public email: string;

  constructor() { }

  // ...
}

尝试使用 ngModel 将对象绑定到模板时出错？

Error while try to bind an object to a template with ngModel?

typescript

angular2-template

angular