四、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];
}

修改後，瀏覽器顯示以下所示，底部多了個提示信息：