Bind a dynamically populated Array in Angular2 using *ngfor

Question

I'm trying to dynamically populate an array in Angular2. Below is my

import { Component } from '@angular/core';

@Component({
    selector: 'pm-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {        
    ngOnInit(): void {
        let numbers: number[] = [];
        for (var i=1; i <= 9; i++) {
            numbers.push(i);
        }
    }
}

Below is the HTML content:

<div id="numbers-frame">
    <div class="well">
        <div *ngFor="let number of numbers; let i = index">
          {{i}} {{number}}
        </div>
    </div>
</div>

I'm not getting any output at all. Can anyone please tell what am I doing wrong in this? Thanks.

numbers variable is is local variable move it to the class level . — Mehari
– Mehari, Commented Dec 1, 2016 at 16:26

yurzui · Accepted Answer · 2016-12-01 16:27:57Z

4

Angular2 looks at the component as context. You should declare numbers property within your component:

export class AppComponent {   
  numbers: number[] = [];

  ngOnInit(): void {
    for (var i=1; i <= 9; i++) {
      this.numbers.push(i);
    }
  }
}

Plunker Example

edited Dec 1, 2016 at 16:27

answered Dec 1, 2016 at 16:18

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

1 Comment

yurzui Over a year ago

@Pankaj Parkar Possible you're right. Anyway angular factory contains code self.context.numbers and it's undefined in his case

Collectives™ on Stack Overflow

Bind a dynamically populated Array in Angular2 using *ngfor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related