總的來說就是利用插值表達式和其它形式的屬性綁定機制麸塞，把數(shù)據(jù)顯示到 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）內(nèi)聯(lián) (inline) 模板還是模板文件
內(nèi)聯(lián)模板： 用template屬性肮砾；
內(nèi)聯(lián)模板文件:可以把模板定義在一個獨立的 HTML 文件中诀黍，并且通過在 @Component 裝飾器中的 templateUrl 屬性把它鏈接到組件。
習慣用內(nèi)聯(lián)模板仗处。
（2）初始化：使用構(gòu)造函數(shù)還是變量
構(gòu)造函數(shù)初始化：把賦值操作放到constructor構(gòu)造函數(shù)中
<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 顯示數(shù)組屬性
先把數(shù)組列出來眯勾，*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）為數(shù)據(jù)創(chuàng)建一個類
先定義一個類郁轻，
在app下創(chuàng)建一個新文件hero.ts
export class Hero {
constructor(
public id: number,
public name: string) { }
}這行代碼表示創(chuàng)建了一個hero類，類中有構(gòu)造函數(shù)和2個屬性id文留、name, TypeScript 提供的簡寫形式--用構(gòu)造函數(shù)的參數(shù)直接定義屬性好唯。
這種簡寫語法：
- 定義了一個構(gòu)造函數(shù)參數(shù)及其類型
- 定義了一個同名的公開屬性
- 當我們 new 出該類的一個實例時，把該屬性初始化為相應的參數(shù)值
（5）使用 Hero 類
我們讓組件中的 heroes屬性返回這些 Hero 對象的數(shù)組燥翅。
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數(shù)組的長度大于3就顯示p標簽要不移除
##這節(jié)結(jié)束了 請點個贊吧——_——*
