如何从ng-container Angular 2中的数组渲染数据?

时间:2017-02-14 10:02:28

标签: javascript arrays angular typescript angular2-template

我想将数据从数组渲染到HTML表中。这是我的模特:

export class Section {
    public id :number;
    public name: string;
    constructor(id: number, theName: string) {
        this.id = id;
        this.name = theName;
    }
}

我导入它并将其填入组件中:

import { Section } from "../models/registerSection.model";

数组声明:

sectionList: Array<Section>;

数组填充在构造函数中:

    this.sectionList = [new Section(1, "A"),
        new Section(2, "B*"),
        new Section(3, "C"),
        new Section(4, "D")];

这就是我尝试在模板中呈现数据的方式:

        <ng-container *ngFor='let data of Section'>
            <tr>
                <td colspan="7">{{data.name}}</td>
            </tr>
        </ng-container>

但桌子是空的。在DOM中,我看到以下内容:

<!--template bindings={
  "ng-reflect-ng-for-of": null
}-->

我做错了什么?在调试中,我可以看到该数组包含数据。

1 个答案:

答案 0 :(得分:2)

应该是:

lib dir

目前,您正在尝试遍历<ng-container *ngFor='let data of sectionList'> 模型,而不是Section,这是该模型的实例。