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


五、小结






  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值