1.插值表达式

  要显示组件的属性,最简单的方式就是通过插值表达式来绑定属性名。要使用插值表达式,就把属性名包裹在双花括号里放进视图模板,如 {{}}

  eg: <h1>{{ name }}</h1>

2.使用 ngFor 显示数组属性

  eg: <li *ngFor ="let hero of heroes"> {{ hero }} </li>

   *ngFor 是 Angular 的“迭代”指令

  不要忘记 *ngFor 中的前导星号 (*)。它是语法中不可或缺的一部分。

3.通过 ngIf 进行条件显示

  有时,应用需要只在特定情况下显示视图或视图的一部分。Angular 的 ngIf 指令会根据一个布尔条件显示或移除一个元素。

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

  不要忘了 *ngIf 中的前导星号 (*)。它是本语法中不可或缺的一部分。

Angular2--显示数据的更多相关文章

  1. mysql数据库导出模型到powerdesigner,PDM图形窗口中显示数据列的中文注释

    1,mysql数据库导出模型到powerdesigner 2,CRL+Shift+X 3,复制以下内容,执行 '******************************************** ...

  2. 怎样操作WebAPI接口(显示数据)

    就在去年Insus.NET已经写好的一个WebAPI项目,并且发布在IIS中.参考<创建与使用Web API>http://www.cnblogs.com/insus/p/5019088. ...

  3. miniui前台无法显示数据

    坑爹,刚开始使用miniui重写对账单的功能,显示数据的时候明明已经获取到json数据了,但前台还是显示不出来,找了一上午的原因,终于找到是因为前台显示字段的field值要改成和json中(数据库字段 ...

  4. EasyUI datagrid 格式化显示数据

    http://blog.163.com/ppy2790@126/blog/static/103242241201512502532379/ 设置formatter属性,是一个函数,格式化函数有3个参数 ...

  5. Flexigrid在IE下不显示数据的处理

    文章总结自我的论坛提问: http://bbs.csdn.net/topics/390498434?page=1#post-394918028 解决方法: 网上的答案经我验证都是不靠谱的,以后大家就知 ...

  6. iPhone Tableview分批显示数据

    //非原创   iPhone Tableview分批显示数据是本文要介绍的内容,主要讲解的是数据的显示.iPhone屏幕尺寸是有限的,如果需要显示的数据很多,可以先数据放到一个table中,先显示10 ...

  7. php 连接mysql数据库并显示数据 实例 转载

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. Extjs中Chart利用series的tips属性设置鼠标划过时显示数据

    效果如下: 从官网找到的例子,大家参考下吧.源码: Ext.require('Ext.chart.*'); Ext.require('Ext.layout.container.Fit'); Ext.o ...

  9. repeater 分页显示数据

    表名:ChinaStates 控件:Repeater 查询代码DA: public class ChinaStatesDA { private DataClassesDataContext Conte ...

  10. SpringMVC+easyui显示数据

    近期做毕业设计,想用easyui,先学习一下CRUD.今天先弄了个表格显示数据库的数据.jsp页面还有非常多其他元素,我就不贴上去了.我显示数据的JSP为/WebContent/WEB-INF/vie ...

随机推荐

  1. 洛谷P1072 Hankson 的趣味题

    P1072 Hankson 的趣味题 题目描述 Hanks 博士是 BT (Bio-Tech,生物技术) 领域的知名专家,他的儿子名叫 Hankson.现在,刚刚放学回家的 Hankson 正在思考一 ...

  2. CF17E Palisection(回文自动机)

    题意翻译 给定一个长度为n的小写字母串.问你有多少对相交的回文子 串(包含也算相交) . 输入格式 第一行是字符串长度n(1<=n<=2*10^6),第二行字符串 输出格式 相交的回文子串 ...

  3. [Xcode 实际操作]三、视图控制器-(12)在Storyboard中使用集合控件

    目录:[Swift]Xcode实际操作 本文将演示集合控件在故事板中的使用. 在控制器根视图上点击鼠标,以选择该根视图. 现在往根视图中添加一个集合视图. 点击[库面板]图标,打开控件库面板 在控件库 ...

  4. 洛谷P3870 [TJOI2009]开关

    题目描述 现有\(N(2 ≤ N ≤ 100000)\)盏灯排成一排,从左到右依次编号为:\(1,2,......,N\).然后依次执行\(M(1 ≤ M ≤ 100000)\)项操作,操作分为两种: ...

  5. tomcat怎么优化

    Tomcat有很多方面,我从内存.并发.缓存四个方面介绍优化方法. 一.Tomcat内存优化 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catal ...

  6. 4、kvm相关网卡操作(添加、删除)

    查看虚拟机的网卡信息 virsh domiflist privi-server 添加临时网卡 virsh attach-interface privi-server --type bridge --s ...

  7. angular中使用canvas画布做验证码

    //填充画布,五位随机数 drawNumber(): void { this.clearCanvas(); let ctx: CanvasRenderingContext2D = this.myGra ...

  8. HIVE获取表的大小和修改日期

    ### 获取表的大小 hdfs dfs -du /user/hive/warehouse/database_name.db/ > 360_du ### 获取表的修改日期 hdfs dfs -ls ...

  9. Spark编程模型(下)

    创建Pair RDD 什么是Pair RDD 包含键值对类型的RDD类型被称作Pair RDD: Pair RDD通常用来进行聚合计算: Pair RDD通常由普通RDD做ETL转化而来. Pytho ...

  10. ElasticSearch 全文检索— ElasticSearch 安装部署

    ElasticSearch 规划-集群规划 ElasticSearch 规划-集群规划 ElasticSearch 规划-用户规划 ElasticSearch 规划-目录规划 ElasticSearc ...