总的来说就是利用插值表达式和其它形式的属性绑定机制，把数据显示到 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 模板中从外界输入的变量 ) 。

效果图.png
（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标签要不移除
##这节结束了 请点个赞吧——_——*