Angular 2 数据显示

可以使用 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 = ['Angular教程', '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, 'Angular教程'),
      new Site(2, 'Google'),
      new Site(3, 'Taobao'),
      new Site(4, 'Facebook')
      ];
  mySite = this.sites[0];
}

链接: https://fly63.com/course/15_838

Angular 2 数据显示 - ngFor

app/app.component.ts

迭代对象

范例

app/site.ts

app/app.component.ts