AngularJS2 数据显示

AngularJS2 将数据显示到用户界面上有以下三种方式：

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

一、通过插值表达式显示组件的属性
格式为：{{属性名}}
// 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 = '菜鸟教程';
}注意：模板是包在反引号 (`) 中的一个多行字符串，而不是单引号 (')。
二、使用 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];三、通过 NgIf 进行条件显示
使用 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];
}