Q:

Cannot access property object in Angular.io TypeScript component

For some reason that I cannot figure out, I cannot access properties of an object, or so it seems.
@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>
  `/**/

This template says EXCEPTION: Error in ./TableComponent class TableComponent - inline template:6:8 caused by: Cannot read property 'headers' of undefined.
 //template:`{{stringify(this.table.rows)}}`,

And this one does the same, but if I remove the .rows it gives me the JSON that I expect:
{
   "title":"myTest",
   "headers":["test1","test2","test3"],
   "rows":[
      { "items":["hi","there","now"] },
      { "items":["how","are","you"] }
    ]
}

And here is the rest of the class declaration.

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

If it helps any, here are the class definitions for Table.
export class Table {
  title: string;
  headers: string[];
  rows: TableRow[];
}

export class TableRow{
  items: string[];
}

A:

If you are getting table in an async way, wrapping the template with an *ngIf might help.
Like this:
<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>

