无法访问Angular.io TypeScript组件中的属性对象

出于某种我无法理解的原因，我无法访问对象的属性，或者看起来是这样

@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>
  `/**/

这一行也一样，但是如果我删除

.rows

，它会提供我期望的JSON：

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

下面是类声明的其余部分

如果有帮助，下面是表的类定义

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

export class TableRow{
  items: string[];
}

---

如果以异步方式获取

表

，则使用

*ngIf

包装模板可能会有所帮助

像这样：

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

{{table.title}}
{{head}}
{{item}}

如果以异步方式获取

表

，则使用

*ngIf

包装模板可能会有所帮助

像这样：

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

{{table.title}}
{{head}}
{{item}}

就是这样。我认为教程没有提到这一点。哦，对了，本教程使用的是一个数组，它可以是空的。@ArlenBeiler很高兴你弄明白了：）就是这样。我认为教程没有提到这一点。哦，对了，本教程使用的是一个数组，它可以是空的。@ArlenBeiler很高兴你弄明白了：）

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