javascript - ngFor-Angular2 的问题

Question

我刚开始学习Angular2，ngfor遇到了问题。这是我的代码:

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'}

    ];

这是我的app.component.html:

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

当我运行此代码时，我只看到标题，但看不到人员数组。我写的ngfor对吗？也许我错过了什么？感谢您的帮助!

Answer 1

绑定(bind)表达式只能引用组件实例的成员，而不能引用任意全局内容。

您需要引用组件实例的属性而不是全局变量:

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

正如@rinukkusu提到的{{persons.Name}}应该是{{person.Name}}