CODEWITHSUNDEEP
javascriptangular
Elior Sastiel
Elior Sastiel

Reputation: 1124

issue with ngFor- Angular2

I just started to learn Angular2, and I got a problem with ngfor. This is my code: 

import { Component } from '@angular/core';
import {Person} from "./Person";


       @Component({
        selector: 'my-app',
        moduleId: module.id,
        templateUrl: 'app.component.html'
      })


    export class AppComponent {
        public title = 'Telphone-books';
        public  persons=PERSONS;
    }

    const PERSONS: Person[] = [
      {id:1, Name:'Shai', LastName:'Sastiel', Telphone: '999999'},
      {id:2, Name:'Jon', LastName:'ali', Telphone: '888888'},
      {id:3, Name:'zeav', LastName:'jobs', Telphone: '7777777'},
      {id:4, Name:'byson', LastName:'ffaf', Telphone: '6666666'}

    ];

This is my app.component.html:

<h1>{{title}}</h1>
<ul>
  <li *ngFor="let person of PERSONS">
    {{persons.Name}}
  </li>
</ul>

when I run this code I see only the title, but i dont see the arrays of persons. did i write the ngfor right? maybe i miss somethins? Thanks for any help!

Upvotes: 0

Views: 162

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658037

Binding expressions can only refer to members of the component instance but not arbitrary global stuff.

You need to refer the property of your component instance instead of the global variable:

<h1>{{title}}</h1>
<ul>
  <li *ngFor="let person of persons">
    {{person.Name}}
  </li>
</ul>

as mentioned by @rinukkusu {{persons.Name}} should be {{person.Name}}

Upvotes: 3

Related Questions