How render data from array in ng-container Angular 2?

Question

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.

Stefan Svrkota · Accepted Answer · 2017-02-14 10:04:14Z

2

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.

answered Feb 14, 2017 at 10:04

Stefan Svrkota

50.9k10 gold badges100 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How render data from array in ng-container Angular 2?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related