通过前面几章节的学习，我们把 AngularJS 2 的基本构架和一些概念理清了，现在我们来学习如何将数据显示到用户界面上

将数据显示到用户界面的方法有三种方式

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

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

要显示组件的属性，插值是最简单的方式

语法

{{属性名}}

下面的代码基于 AngularJS 2 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 属性的值，并显示在浏览器中

运行范例，浏览器显示如下