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 ...
随机推荐
- Redis 操作帮助类
首先从Nuget中添加StackExchange.Redis包 1.Redis连接对象管理帮助类 using Mvc.Base; using Mvc.Base.Log; using StackExch ...
- postgrelsql 的 wm_concat : string_agg
string_agg,array_agg 这两个函数的功能大同小异,只不过合并数据的类型不同 array_agg(expression) 把表达式变成一个数组 一般配合 array_to_string ...
- IntellJ idea maven打包——项目带有第三方jar包
今天用maven打包时,提示程序包com.aspose.slides不存在 原来第三方jar是直接导入的,打包时没找到 那项目中带有第三方jar包,怎么打包? 方法: 1.根路径建立lib包,将第三方 ...
- .Net Core 1.1打包发布到Linux
在 .Net Core 1.0 中我们打包跨平台包是在 project.json 中配置的 但是 .Net Core 1.1 去掉了 project.json 具体咋办参考:https://blogs ...
- 【Python开发】PyInstaller打包Python程序
PyInstaller是一个能将Python程序转换成单个可执行文件的程序, 操作系统支持Windows, Linux, Mac OS X, Solaris和AIX.并且很多包都支持开箱即用,不依赖环 ...
- mysql left join和union结合的用法
left join和union结合的用法子查询union 然后加个括号设置个别名 (union自动去除 重复的 ) <pre>select o.nickName,o.sex,o.provi ...
- Qt5 QtQuick系列----QtQuick的Secne Graph剖析(3)-- qml与OpenGl结合
我读的书愈多,就愈亲近世界,愈明了生活的意义,愈觉得生活的重要. -- 高尔基 需要先看:https://blog.csdn.net/qq_35865125/article/details/86485 ...
- 通过元类创建一个Python类
通过元类创建一个Python类 最开始学pytohn的时候我们这样定义类 class ClassName: pass 当熟悉了元类的概念之后我们还可以这样创建 ClassName = type(&qu ...
- Java开发笔记(一百二十四)AWT绘图操作
前面介绍了如何使用画笔在控件上展示图像,可是图像来源于磁盘图片,无法即兴绘制个性化的图案.所幸画笔工具Graphics不仅能够描绘图像,还支持绘制常见的几何形状,也支持绘制文本字符串,除了绘制图像用到 ...
- yzoj2424 小迟的数字 题解
题意:如果一个数字用十进制表示,有大于等于1个1,或者大于等于2个2,或者大于等于3个3,或者大于等于4个4,或者大于等于5个5,或者大于等于6个6,或者大于等于7个7,或者大于等于8个8,或者大于等 ...