Angular2 TypeScript接口陣列不能正常工作

我正在寫一個Angular2應用程序。我想使用包含所有消息的接口和數組來顯示消息。這裏是我的打字稿組成的有趣的部分：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; 
}

正如你可以從事物打字稿側看到的一切看起來正常的（我猜）。顯示的東西在模板中工作得很好，在這種情況下，我使用了以下內容：

<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未定義？

來源

2017-02-12 flyingPotat0

「但只要我使用的接口信息和數組我得到」你怎麼用「接口信息」得到這個錯誤？ –

那麼，說實話我不知道任何其他表達方式呢？對不起，我是新來的TypeScript ... – flyingPotat0

這將是很好，如果能說出爲什麼一個問題得到downvote。我需要信息才能變得更好。 – flyingPotat0

從你的代碼看起來你並沒有初始化消息數組。在設置之前，您沒有給該字段賦值。由於您的代碼現在正在進行，因爲您正在調用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}]; 
    } 
}

來源

2017-02-12 20:12:09

完美的工作！謝謝！ – flyingPotat0

Angular2 TypeScript接口陣列不能正常工作

回答

相關問題