Angular.ioのプロパティオブジェクトにアクセスできないTypeScriptコンポーネント

Question

何らかの理由で私が理解できない、オブジェクトのプロパティにアクセスできないかのように見えます。

@Component({ 
    selector: 'ab-table', 
    template:` 
    <h2>{{table.title}}</h2> 
    <table> 
    <thead> 
    <tr> 
    <th *ngFor="let head of table.headers"> 
    {{head}} 
    </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let row of table.rows"> 
    <td *ngFor="let item of row.items"> 
    {{item}} 
    </td> 
    </tr> 
    </tbody> 
    </table> 
    `/**/ 

このテンプレートはEXCEPTION: Error in ./TableComponent class TableComponent - inline template:6:8 caused by: Cannot read property 'headers' of undefinedを言います。

//template:`{{stringify(this.table.rows)}}`, 

そして、この1つは同じことを行いますが、私は.rowsを削除する場合、それは私が期待してJSON与える：

{ 
    "title":"myTest", 
    "headers":["test1","test2","test3"], 
    "rows":[ 
     { "items":["hi","there","now"] }, 
     { "items":["how","are","you"] } 
    ] 
} 

そして、ここでは、クラス宣言の残りの部分です。

}) 
export class TableComponent { 
    @Input() table: Table; 
    stringify(item): string{ 
     return JSON.stringify(item); 
    } 
    getTable(key): any { 
     return this.table[key]; 
    } 
} 

それがいずれかを助けている場合、ここでの表のクラス定義があります。

export class Table { 
    title: string; 
    headers: string[]; 
    rows: TableRow[]; 
} 

export class TableRow{ 
    items: string[]; 
} 

Answer 1

あなたが役立つかもしれない*ngIfでテンプレートを包む、非同期な方法でtableを取得している場合。このよう

：

それをやった

<div *ngIf="table"> 
    <h2>{{table.title}}</h2> 
     <table> 
     <thead> 
     <tr> 
     <th *ngFor="let head of table.headers"> 
     {{head}} 
     </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr *ngFor="let row of table.rows"> 
     <td *ngFor="let item of row.items"> 
     {{item}} 
     </td> 
     </tr> 
     </tbody> 
     </table> 
</div>