Question

我正在编写一个Angular2应用程序。我想使用接口和包含所有消息的数组来显示消息。这是我的TypeScript组件的有趣部分：

export class ChatComponent
{
  messages: message[];
  constructor()
  {
    this.messages.push({from: 'me', time: new Date().getTime(), type: 'text', value: 'Hallo Welt!', sent: new Date().getTime(), delivered: 0, read: 0});
  }
}

interface message
{
  from: string;
  time: number;
  type: string;
  value: string;
  sent: number;
  delivered: number;
  read: number;
}

从TypeScript方面你可以看到一切看起来都不错（我猜）。在模板中显示东西工作正常，在这种情况下我使用以下内容：

<div class = "message" *ngFor = "let message of messages">
  <div>{{message.value}}</div>
  <div>{{message.time}}</div>
</div>

当只使用数组并用对象填充时，此设置工作正常。但是只要我使用接口message和我得到的数组

EXCEPTION: Error in :0:0 caused by: this.messages is undefined

我觉得这是一些愚蠢的错误或误解，但找不到任何有用的东西。为什么this.messages未定义？

Answer 1

从您的代码中，您似乎没有初始化messages数组。在设置之前，您没有为该字段赋值。由于您的代码现在正好，构造函数将抛出错误，因为您正在调用this.messages.push但this.messages未定义，因为您没有给它一个值。您可以使用以下方法进行修复：

export class ChatComponent
{
  messages: message[];
  constructor()
  {
    this.messages = [];
    this.messages.push({from: 'me', time: new Date().getTime(), type: 'text', value: 'Hallo Welt!', sent: new Date().getTime(), delivered: 0, read: 0});
  }
}

甚至更好：

export class ChatComponent
{
  messages: message[];
  constructor()
  {
    this.messages = [{from: 'me', time: new Date().getTime(), type: 'text', value: 'Hallo Welt!', sent: new Date().getTime(), delivered: 0, read: 0}];
  }
}

Angular2 TypeScript接口数组不起作用

1 个答案: