Ionic2显示数据

一、使用插值表达式显示组件属性

要显示属性，最简单的方式就是使用插值表达式来绑定属性名，要使用插值表达式，就把属性名包裹在双重大括号中放进视图模板。

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';
}

Angular会自动从组件中提取title和myHero属性值，并且把这些插入浏览器中，一旦属性发生变化，Angular就会自动刷新显示。

严格来说，重新显示是在某些与视图有关的异步事件之后发生的，比如按键、定时器或收到XHR相应。

注意：我们没有使用过new来创建AppComent类的实例，是Angular替我们创建了他，那么他是如何来创建的呢？

注意@Component装饰器中指定的css选择器selector，他指定了一个叫my-app的元素，我们曾把一个<my-app>元素添加到index.body里，当我们通过main.ts中的AppComponent类启动时，Angular在index.html中查找一个<my-app>元素，然后实例化一个Appcomponent，并将其渲染到<my-app>标签中。

二、使用ngFor显示数组属性

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  myHero = this.heroes[0];
}

 template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    <p>Heroes:</p>
    <ul>
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
    </ul>
  `

注意看ngFor中的表达式hero，他是一个模板输入变量。（即ngFor模板从外界输入的变量）。

Angular为列表的每一个条目复制一个li元素。

三、为数据创建一个类

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

用的是TypeScripit的简写形式，直接用构造函数的参数定义类型。

这个类做了很多：

（1）定义了一个构造函数参数及其类型

（2）定义了一个同名的公开属性

（3）当我们new出该类的实例时，把该属性初始化为相应的参数值。

四、*ngIf

Angular并不是在显示和隐藏这条消息，他是从DOM中添加和移除这些元素，在这个范例中他们的性能几乎等价，但是更多的话性能区别会更加显著。

五、小结