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> `
Angular为列表的每一个条目复制一个li元素。
三、为数据创建一个类
export class Hero { constructor( public id: number, public name: string) { }}
这个类做了很多:
(1)定义了一个构造函数参数及其类型
(2)定义了一个同名的公开属性
(3)当我们new出该类的实例时,把该属性初始化为相应的参数值。
四、*ngIf
Angular并不是在显示和隐藏这条消息,他是从DOM中添加和移除这些元素,在这个范例中他们的性能几乎等价,但是更多的话性能区别会更加显著。
五、小结
0 0
- Ionic2显示数据
- ionic2中的LoadingController用法。在数据加载完之前显示
- ionic2 直接显示网页内容
- ionic2 数据更新,刷新页面
- ionic2
- Ionic2 Post请求后台服务数据
- Ionic2 使用loading组件实现下载进度显示效果
- ionic2检测下载更新代码及进度百分比显示问题
- ionic2 子页面隐藏去掉底部tabs导航,子页面全占满显示方法
- ionic2 svg格式icon不显示,报错: Refused to load the image 'data:image/svg
- ionic2的返回按钮修改和tab上下显示的翻译
- ionic2的返回按钮修改和tab上下显示的翻译
- ionic2 读取存储在数据库中的ionic前台代码,并在前台页面显示
- ionic2 判断是否是第一次登陆应用是否实现启动页的显示
- Ionic2 Tutorial
- ionic2教程
- ionic2+angular2
- ionic2 轮播图
- JDK源码分析(1)-java.util.ArrayList
- 第三方登录(微博)
- 深入剖析Guice(Google依赖注入框架)
- 数据结构实验之二叉树七:叶子问题
- Atitit prj 项目管理与行政管理(1)------项目环境的概览与建立
- Ionic2显示数据
- 快速排序
- 如何注册Tomcat到Window Service服务
- C#语言与面向对象技术(3)
- 深度好文丨读完此文,就知道Hadoop了!
- 动态规划复习
- 动态人脸检测(脸数可调)
- 数据库连接池
- PHP魔术方法之__toStrring()