My goal is to display data from an array in an HTML table using the Section model provided below:
export class Section {
public id :number;
public name: string;
constructor(id: number, theName: string) {
this.id = id;
this.name = theName;
}
}
First, I import the Section model into my component:
import { Section } from "../models/registerSection.model";
Next, I declare an array:
sectionList: Array<Section>;
The array is populated in the constructor like so:
this.sectionList = [new Section(1, 'A'),
new Section(2, 'B*'),
new Section(3, 'C'),
new Section(4, 'D')];
Here's how I attempt to render the data in the template:
<ng-container *ngFor='let data of sectionList'>
<tr>
<td colspan="7">{{data.name}}</td>
</tr>
</ng-container>
However, the table remains empty and the DOM shows:
<!--template bindings={
"ng-reflect-ng-for-of": null
}-->
I'm puzzled by this issue since I've confirmed that the array does contain the necessary data during debugging. What could be causing this problem?