总的来说就是利用插值表达式和其它形式的属性绑定机制，把数据显示到 UI 上
a.插值表达式
要显示组件的属性，最简单的方式就是通过插值表达式 (Interpolation) 来绑定属性名。 要使用插值表达式，就把属性名包裹在双重花括号里放进视图模板，如 {{myHero}} 。
在原来的app/app.component.ts文件中修改成：
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`
})
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
}
就会把{{title}}和{{myHero}}这两个值输入到模板中。
Angular 在 index.html 中查找一个 <my-app> 元素， 然后实例化一个 AppComponent，并将其渲染到 <my-app> 标签中。
（1）内联 (inline) 模板还是模板文件
内联模板： 用template属性；
内联模板文件:可以把模板定义在一个独立的 HTML 文件中，并且通过在 @Component 装饰器中的 templateUrl 属性把它链接到组件。
习惯用内联模板。
（2）初始化：使用构造函数还是变量
构造函数初始化：把赋值操作放到constructor构造函数中
<pre>export class AppCtorComponent {
title: string;
myHero: string;
constructor() {
this.title = 'Tour of Heroes';
this.myHero = 'Windstorm';
}
}</pre>变量赋值：title '赋值Tour of Heroes
<pre>export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
}</pre>
（3）使用 ngFor 显示数组属性
先把数组列出来，*ngFor加在标签上，进行迭代，每次迭代都会把属性设置为当前条目。
app/app.component.ts (class)
<pre>export class AppComponent {
title = 'Tour of Heroes';
heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
myHero = this.heroes[0];
}</pre>
app/app.component.ts (template)
ngFor双引号表达式中的 hero 。 它是一个 <b>模板输入变量 </b>( 译注：即 ngFor 模板中从外界输入的变量 ) 。
（4）为数据创建一个类
先定义一个类，
在app下创建一个新文件hero.ts
export class Hero {
constructor(
public id: number,
public name: string) { }
}这行代码表示创建了一个hero类，类中有构造函数和2个属性id、name, TypeScript 提供的简写形式--用构造函数的参数直接定义属性。
这种简写语法：
- 定义了一个构造函数参数及其类型
- 定义了一个同名的公开属性
- 当我们 new 出该类的一个实例时，把该属性初始化为相应的参数值
（5）使用 Hero 类
我们让组件中的 heroes属性返回这些 Hero 对象的数组。
app/app.component.ts (heroes)
<pre>heroes = [
new Hero(1, 'Windstorm'),
new Hero(13, 'Bombasto'),
new Hero(15, 'Magneta'),
new Hero(20, 'Tornado')
];
myHero = this.heroes[0];
</pre>
模板文件进行更新app/app.component.ts (template)
template:
`
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero.name}}</h2>
<p>Heroes:</p>
<ul>
<li *ngFor="let hero of heroes">
{{ hero.name }}
</li>
</ul>
`
注意点：应该在模板中引入hero类
（6）通过 NgIf 进行条件显示
应用只需要在特定情况下显示视图或视图的一部分.
Angular 的 NgIf 指令会基于条件的真假来添加或移除一个元素而不是显隐dom。
例子：
<pre><p ngIf="heroes.length > 3">There are many heroes!</p></pre>
这个heroes数组的长度大于3就显示p标签要不移除
##这节结束了 请点个赞吧——_——*
