[Angular2] Displaying Data（显示数据）

Angular通过将HTML模板中的标签与组件的属性绑定的方式来在UI显示数据。

插值法

显示组件属性最简单的方法就是使用插值法（interpolation）。插值方法就是将组件属性直接放在双层大括号里：

import {Component} from 'angular2/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';
}

在应用运行过程中，Angular遇到<my-app>标签时，就会实例化一个AppComponent组件，将组件渲染到<my-app>标签内，这时会读取组件的属性，接将属性值添加到浏览器中。Angular会在这些属性变化时更新UI上的显示。准确地说，属性的重新显示发生在与视图相关的某些异步事件之后，如击键、timer完成、异步XHR响应。

PS：内联模板还是模板文件？

组件的模板可以直接内联在组件中，使用template属性。或者将模板定义在单独的文件中，然后将@Component的templateUrl属性指向该文件。

NgFor

使用NgFor指令显示数组中的每一项数据：

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
 <h1>{{title}}</h1>
 <h2>My favorite hero is: {{myHero}}</h2>
 <p>Heroes:</p>
 <ul>
 <li *ngFor="#hero of heroes">
 {{ hero }}
 </li>
 </ul>
 `
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  myHero = this.heroes[0];
}

在<li>标签上使用了*ngFor，意思是将<li>元素（以及它的子元素）作为迭代模板。

指令中的#hero是定义了一个本地模板变量（local template variable），使用#前缀定义一个名为hero的本地变量。

Angular会为数组中的每一项复制一个<li>，将当前迭代项赋值给hero变量，然后使用该变量作为上下文向迭代模板中插值。

这里是将数据定义在属性中。实际上通常要显示的数据是对象，也就是类的实例。接下来创建hero.ts文件，定义Hero类：

export class Hero {
  constructor(
    public id:number,
    public name:string) { }
}

修改app.component.ts：

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
 <h1>{{title}}</h1>
 <h2>My favorite hero is: {{myHero.name}}</h2>
 <p>Heroes:</p>
 <ul>
 <li *ngFor="#hero of heroes">
 {{ hero.name }}
 </li>
 </ul>
 `
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes = [
    new Hero(1, 'Windstorm'),
    new Hero(13, 'Bombasto'),
    new Hero(15, 'Magneta'),
    new Hero(20, 'Tornado')
  ];
  myHero = this.heroes[0];
}

浏览器中显示结果与上面是一样的。

NgIf

有时候，应用在某些特定条件满足时才显示某些视图。NgIf指令会根据条件表达式的值决定是添加视图还是移除视图。
在模板最后添加：

<p *ngIf="heroes.length > 3">There are many heroes!</p>

Angular不是简单地根据模板表达式的值来决定是显示还是隐藏<p>元素，而是向DOM添加或移除<p>元素。

将heroes数组删掉两个之后：

参考资料

Angular2官方文档