1、数据循环 *ngFor

(1)普通循环

<ul>
<li *ngFor = "let item of list" >
{{ item }}
</li>
</ul>

(2)遍历数组同时获取索引值key

<ul>
<li *ngFor = "let item of list; let i = index;" >
{{ item }} --{{ i }}
</li>
</ul>

(3)template 循环

<ul>
<li template = "ngFor let item of list" >
{{ item }}
</li>
</ul>

例:对象内部嵌套数字,多重循环

<!-- 在compontent.ts 文件里定义数组 -->
export class NewsComponent implements OnInit {

public list:any[];

constructor() {

this.list4=[

{

'catename':"宝马",

"list":[

{'title':'宝马x1'},
{'title':'宝马x3'},
{'title':'宝马x2'},
{'title':'宝马x4'},

]

} ,{

'catename':"奥迪",

"list":[

{'title':'奥迪q1'},
{'title':'奥迪q2'},
{'title':'奥迪q3'},
{'title':'奥迪q4'},
]

},

]

}

ngOnInit() {

}

}

<!-- HTML文件里循环数组 -->
<ul>
<li *ngFor = "let item of list; let i = index;" >
{{ item.dog }} --{{ i }}
<ol>
<li *ngFor = "let cat of item.list" > {{ cat.title }} </li>
</ol>
</li>
</ul>

2、条件判断 *ngIf

<!--条件判断语句-->

<div *ngIf="flag">flag=true的情况下面显示1</div>

<br>

<button (click)='flag=!flag'>执行方法改变flag</button>  <!--取反-->

angularcli 第三篇(数据循环*ngFor、条件判断*ngIf)的更多相关文章

  1. python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

    python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...

  2. vue数据渲染、条件判断及列表循环

    1.数据渲染  {{msg}} <template> <div id="app"> {{msg}} </div> </template&g ...

  3. Java 控制语句:循环、条件判断

    基础很重要,基础很重要,基础很重要.重要的事情说三遍,. 程序设计中的控制语句主要有三种:顺序.分支和循环.我们每天写的代码,除了业务相关,里面会包含大量的控制语句.但是控制语句的基本使用,是否有些坑 ...

  4. ansible 循环与条件判断when

    普通循环 with_itemes 变量组 { item } 循环变量 示例 - name: 覆盖配置文件 copy: src=/root/{{ item }} dest=/root/test/{{ i ...

  5. shell基础篇(五)条件判断

    写脚本时:有时要判断字符串是否相等,数字测试.这对后面学习的shell语句,循环,条件语句做好基础. 条件判断格式  1. test condition : test命令  2. [ conditio ...

  6. Ansible系列(六):循环和条件判断

    本文目录:1. 循环 1.1 with_items迭代列表 1.2 with_dict迭代字典项 1.3 with_fileglob迭代文件 1.4 with_lines迭代行 1.5 with_ne ...

  7. PHP和JS在循环、条件判断中的不同之处

    一.条件判断: php中算  false 的情况 1. boolean:false 2. 整形:0 3.浮点型:0 4.字符串:"" "0"(其他都对) 5.空 ...

  8. angular 中数据循环 *ngFor

    <!--The content below is only a placeholder and can be replaced.--> <div style="text-a ...

  9. Go语言之循环与条件判断

    一.for循环 Go 语言中没有 while 循环,只有一个 for 循环 for 变量初始化;条件;变量自增/自减 { 循环体内容 } 1.基本使用 for i := 0; i < 10; i ...

随机推荐

  1. Qt 图片缩放参数计算

    缩放图片 void VCImgWidget::wheelEvent(QWheelEvent *event) { ) { // 当滚轮远离使用者时 //ui->textEdit->zoomI ...

  2. PID:我应该何时计算积分项?

    最近看到了Brett Beauregard发表的有关PID的系列文章,感觉对于理解PID算法很有帮助,于是将系列文章翻译过来!在自我提高的过程中,也希望对同道中人有所帮助.作者Brett Beaure ...

  3. [转]windows 下 gcc/g++ 的安装

    链接地址:https://www.jianshu.com/p/ff24a81f3637 不过下载地址直接进这里就可以了:https://sourceforge.net/projects/mingw/

  4. teamviewer破解版

    简介 TeamViewer是一个能在任何防火墙和NAT代理的后台用于远程控制的应用程序,桌面共享和文件传输的简单且快速的解决方案.为了连接到另一台计算机,只需要在两台计算机上同时运行 TeamView ...

  5. 最新 大众书网java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.大众书网等10家互联网公司的校招Offer,因为某些自身原因最终选择了大众书网.6.7月主要是做系统复习.项目复盘.Leet ...

  6. 二、Spring中的@ComponentScan自动扫描组件

    在以往采用xml配置的方式中,我们通常需要配置<context:component-scan>标签 比如这样: <!-- 包扫描.只要标注了@Controller.@Service. ...

  7. PHP 获取星期

    <?php function getWeek($time = 0) { $week_array=array('日', '一', '二', '三', '四', '五', '六'); //先定义一个 ...

  8. 12 Cookie、Session和JSP基础

    1.会话技术 (1)会话概念:一次会话中包含多次请求和响应.一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止 (2)会话功能:在一次会话的范围内的多次请求间,共享数据 (3)会 ...

  9. python基础 — 循环重新输入

    后续完善各种循环案例 while True: try: str_num = input('input a number:') num = float(str_num) print("你输入的 ...

  10. STM32F030-UART1_DMA使用提示

    STM32F030-UART1_DMA使用提示 前言: 今天把STM32F030C8T6的串口DMA学习了一下,为了加快各位研发人员的开发进度,避免浪费大量的时间在硬件平台上,写出个人代码调试的经验. ...