Angular 2 数据显示 - NgIf

angularJS 2 可以使用 NgIf 来设置输出指定条件的数据

下面的代码判断如果网站数 3 个以上,输出提示信息


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

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