Angular2 TypeScriptインターフェイス配列が動作しません

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

コードからは、メッセージ配列を初期化していないようです。フィールドを設定する前に値を指定していません。あなたのコードが現在立っているので、this.messages.pushを呼び出しているので、コンストラクタはエラーをスローしますが、this.messagesは値を与えなかったため定義されていません。

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