Angular 2 数据显示 - ngFor - 学习 AngularJS 2

通过前面几章节的学习，我们把 AngularJS 2 的基本构架和一些概念理清了，现在我们来学习如何将数据显示到用户界面上

将数据显示到用户界面的方法有三种方式

通过插值表达式显示组件的属性
通过 NgFor 显示数组型属性
通过 NgIf 实现按条件显示

使用 ngFor 显示数组属性

可以使用 ngFor 循环输出列表或数组

下面的代码使用 ngFor 循环输出多个站点

app/app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>我喜欢的网站: {{mySite}}</h2>
    <p>网站列表:</p>
    <ul>
      <li *ngFor="let site of sites">
        {{ site }}
      </li>
    </ul>
    `
})

export class AppComponent {
  title = '站点列表';
  sites = ['简单教程', 'Google', 'Taobao', 'Facebook'];
  mySite = this.sites[0];
}

上面的代码在模板使用 Angular 的 ngFor 指令来显示 sites 列表中的每一个条目

注意: 不要忘记 *ngFor 中的前导星号 ( * )

运行以上范例，浏览器显示结果如下

迭代对象

上面的范例中 ngFor 循环了一个数组，事实上 ngFor 可以迭代任何可迭代的对象

范例

首先创建一个 app/site.ts 的文件, 复制以下内容

app/site.ts

export class Site {
  constructor(
    public id: number,
    public name: string) { }
}

上面的代码定义了一个带有构造函数和两个属性： id 和 name 的类

然后我们就可以循环输出 Site 类的 name 属性

app/app.component.ts

import { Component } from '@angular/core';
import { Site } from './site';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>我喜欢的网站: {{mySite.name}}</h2>
    <p>网站列表:</p>
    <ul>
      <li *ngFor="let site of sites">
        {{ site.name }}
      </li>
    </ul>
    `
})

export class AppComponent {
  title = '站点列表';
  sites = [
      new Site(1, '简单教程'),
      new Site(2, 'Google'),
      new Site(3, 'Taobao'),
      new Site(4, 'Facebook')
      ];
  mySite = this.sites[0];
}

运行以上范例，浏览器显示结果如下