Angular 2数据显示

如何将数据显示到用户界面上，可以使用以下3种方式：

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

 

1.通过插值表达式显示组件的属性

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

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

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

 

2.使用NgFor显示数组属性，如：

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 AppComponeent{
      title = '站点列表';
      sites = ['菜鸟教程','Google','TaoBao','FaceBook']
      mySite = this.sites[0];
}

代码中使用angular的ngFor指令来显示sites列表的每一个条目，不要忘记前面加个*。显示如下：

 

3.通过NgIf进行条件显示

我们可以通过NgIf来设置输出指定条件的数据。

以下实例中我们在判断网站数3个以上，输出提示显示，代码如下：

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>
        <p *ngIf = "sites.length > 3">你有很多个喜欢的网站！</P>
        `
    })
export class AppComponeent{
      title = '站点列表';
      sites = ['菜鸟教程','Google','TaoBao','FaceBook']
      mySite = this.sites[0];
}

注意：ngIf标签中为它的条件，当条件满足时显示，条件不满足时不显示。