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)}}`,
这个也是这样，但是如果我删除了.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];
    }
}

如果它有帮助，这里是Table的类定义。

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

export class TableRow{
  items: string[];
}

Answer 1

如果您以异步方式获取table，则使用*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>

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

1 个答案: