Ionic2显示数据

来源:互联网 发布:端口嗅探 编辑:程序博客网 时间:2024/06/01 07:54

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

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

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中添加和移除这些元素,在这个范例中他们的性能几乎等价,但是更多的话性能区别会更加显著。


五、小结






0 0