I want to render data from array into HTML table. Here's my model:
export class Section {
public id :number;
public name: string;
constructor(id: number, theName: string) {
this.id = id;
this.name = theName;
}
}
I import it and fill it in the component:
import { Section } from "../models/registerSection.model";
Array declaration:
sectionList: Array<Section>;
Array is filled in constructor:
this.sectionList = [new Section(1, "A"),
new Section(2, "B*"),
new Section(3, "C"),
new Section(4, "D")];
This is how I'm trying to render data in template:
<ng-container *ngFor='let data of Section'>
<tr>
<td colspan="7">{{data.name}}</td>
</tr>
</ng-container>
But the table is empty. In DOM, I see the following:
<!--template bindings={
"ng-reflect-ng-for-of": null
}-->
What am I doing wrong? In debugging I can see that array contains data.
It should be:
<ng-container *ngFor='let data of sectionList'>
Right now, you are trying to iterate through Section
model, not sectionList
which is instance of that model.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.