四、AngularJS2 数据显示

本章节咱们将为你们介绍如何将数据显示到用户界面上，能够使用如下三种方式：

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

经过插值表达式显示组件的属性

要显示组件的属性，插值是最简单的方式，格式为：{{属性名}}。

如下代码基于 AngularJS2 TypeScript 环境配置 来建立，你能够再该章节上下载源码，并修改如下提到的几个文件。

app/app.component.ts 文件：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>我喜欢的网站: {{mySite}}</h2>
    `
})
export class AppComponent {
  title = '站点列表';
  mySite = '菜鸟教程';
}

Angular 会自动从组件中提取 title 和 mySite 属性的值，并显示在浏览器中，显示信息以下：

注意：模板是包在反引号 (`) 中的一个多行字符串，而不是单引号 (')。

使用 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];
}

修改后，浏览器显示以下所示：

经过 NgIf 进行条件显示

咱们能够使用 NgIf 来设置输出指定条件的数据。

如下实例中咱们判断若是网站数 3 个以上，输出提示信息：修改如下 app.component.ts 文件，代码以下：

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>
    <p *ngIf="sites.length > 3">你有不少个喜欢的网站!</p>
    '
})
 
export class AppComponent {
  title = '站点列表';
  sites = [
      new Site(1, '菜鸟教程'),
      new Site(2, 'Google'),
      new Site(3, 'Taobao'),
      new Site(4, 'Facebook')
      ];
  mySite = this.sites[0];
}

修改后，浏览器显示以下所示，底部多了个提示信息：