Angular2 Массив интерфейса TypeScript не работает

Question

Я пишу приложение Angular2. Я хочу отображать сообщения, используя интерфейс и массив, содержащий все сообщения. Вот интересная часть моей машинописи компоненты:

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

Как вы можете видеть из машинописи стороны вещей все выглядит хорошо (я думаю). Отображение материала в шаблоне работало нормально, в этом случае я использую следующее:

<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

Из вашего кода, похоже, что вы не инициализируете массив сообщений. Перед настройкой вы не указываете значение поля. Поскольку ваш код стоит прямо сейчас, конструктор выдает ошибку, потому что вы вызываете 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}]; 
    } 
}