本章节我们将为大家介绍如何将数据显示到用户界面上，可以使用以下三种方式：
- 通过插值表达式显示组件的属性
- 通过 NgFor 显示数组型属性
- 通过 NgIf 实现按条件显示
通过插值表达式显示组件的属性
要显示组件的属性，插值是最简单的方式，格式为：{{属性名}}。
以下代码基于 Angular 2 TypeScript 环境配置 来创建，你可以在该章节上下载源码，并修改以下提到的几个文件。
app/app.component.ts 文件：
代码语言：javascript复制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 文件：
代码语言：javascript复制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];
}
