angularcli 第三篇(数据循环*ngFor、条件判断*ngIf)
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)的更多相关文章
- python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器
python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...
- vue数据渲染、条件判断及列表循环
1.数据渲染 {{msg}} <template> <div id="app"> {{msg}} </div> </template&g ...
- Java 控制语句:循环、条件判断
基础很重要,基础很重要,基础很重要.重要的事情说三遍,. 程序设计中的控制语句主要有三种:顺序.分支和循环.我们每天写的代码,除了业务相关,里面会包含大量的控制语句.但是控制语句的基本使用,是否有些坑 ...
- ansible 循环与条件判断when
普通循环 with_itemes 变量组 { item } 循环变量 示例 - name: 覆盖配置文件 copy: src=/root/{{ item }} dest=/root/test/{{ i ...
- shell基础篇(五)条件判断
写脚本时:有时要判断字符串是否相等,数字测试.这对后面学习的shell语句,循环,条件语句做好基础. 条件判断格式 1. test condition : test命令 2. [ conditio ...
- Ansible系列(六):循环和条件判断
本文目录:1. 循环 1.1 with_items迭代列表 1.2 with_dict迭代字典项 1.3 with_fileglob迭代文件 1.4 with_lines迭代行 1.5 with_ne ...
- PHP和JS在循环、条件判断中的不同之处
一.条件判断: php中算 false 的情况 1. boolean:false 2. 整形:0 3.浮点型:0 4.字符串:"" "0"(其他都对) 5.空 ...
- angular 中数据循环 *ngFor
<!--The content below is only a placeholder and can be replaced.--> <div style="text-a ...
- Go语言之循环与条件判断
一.for循环 Go 语言中没有 while 循环,只有一个 for 循环 for 变量初始化;条件;变量自增/自减 { 循环体内容 } 1.基本使用 for i := 0; i < 10; i ...
随机推荐
- Qt 图片缩放参数计算
缩放图片 void VCImgWidget::wheelEvent(QWheelEvent *event) { ) { // 当滚轮远离使用者时 //ui->textEdit->zoomI ...
- PID:我应该何时计算积分项?
最近看到了Brett Beauregard发表的有关PID的系列文章,感觉对于理解PID算法很有帮助,于是将系列文章翻译过来!在自我提高的过程中,也希望对同道中人有所帮助.作者Brett Beaure ...
- [转]windows 下 gcc/g++ 的安装
链接地址:https://www.jianshu.com/p/ff24a81f3637 不过下载地址直接进这里就可以了:https://sourceforge.net/projects/mingw/
- teamviewer破解版
简介 TeamViewer是一个能在任何防火墙和NAT代理的后台用于远程控制的应用程序,桌面共享和文件传输的简单且快速的解决方案.为了连接到另一台计算机,只需要在两台计算机上同时运行 TeamView ...
- 最新 大众书网java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.大众书网等10家互联网公司的校招Offer,因为某些自身原因最终选择了大众书网.6.7月主要是做系统复习.项目复盘.Leet ...
- 二、Spring中的@ComponentScan自动扫描组件
在以往采用xml配置的方式中,我们通常需要配置<context:component-scan>标签 比如这样: <!-- 包扫描.只要标注了@Controller.@Service. ...
- PHP 获取星期
<?php function getWeek($time = 0) { $week_array=array('日', '一', '二', '三', '四', '五', '六'); //先定义一个 ...
- 12 Cookie、Session和JSP基础
1.会话技术 (1)会话概念:一次会话中包含多次请求和响应.一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止 (2)会话功能:在一次会话的范围内的多次请求间,共享数据 (3)会 ...
- python基础 — 循环重新输入
后续完善各种循环案例 while True: try: str_num = input('input a number:') num = float(str_num) print("你输入的 ...
- STM32F030-UART1_DMA使用提示
STM32F030-UART1_DMA使用提示 前言: 今天把STM32F030C8T6的串口DMA学习了一下,为了加快各位研发人员的开发进度,避免浪费大量的时间在硬件平台上,写出个人代码调试的经验. ...