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. k8s记录-master组件部署(八)

    在 192.168.0.1 app 用户下执行1)程序准备tar zxvf kubernetes-server-linux-amd64.tar.gzmv kubernetes/server/bin/{ ...

  2. Laya的版本管理

    参考: Laya项目发布详解 发布时,勾选开启版本管理 点击上图“是否开启版本管理”右边的+号. 可以选择加入版本管理,或者排除版本管理的文件夹. 比如我要排除bin/test这个文件夹下的文件,不使 ...

  3. 自定义Shell分隔符

    在shell中使用for循环语句时,参数列表有时候需要将空格纳入参数当中,这时就不好使用空格作为分隔符.如下例中,我实际想要输出的是a1.a2.b1.b2以及hello world,但却输出了如下内容 ...

  4. python脚本容器化

    https://blog.csdn.net/zstack_org/article/details/53099919 如何选择 base image: https://blog.csdn.net/nkl ...

  5. Appium脚本(3):sendkey(封装capability)

    输入中文注意添加这个配置,否正中文输入不了desired_caps['unicodeKeyboard'] = "True"desired_caps['resetKeyboard'] ...

  6. jenkins:新增节点是启动方式没有Launch agent by connecting it to the master

    默认在这里的配置是禁用 所以启动方式只有两种,缺少Launch agent by connecting it to the master

  7. python:使用Djangorestframework编写post和get接口

    1.安装django pip install django 2.新建一个django工程 python manage.py startproject cainiao_monitor_api 3.新建一 ...

  8. python jieba 词云

    #!/usr/bin/python # coding:utf-8 # 绘制一个<三体>全集词云 # pip install jieba # pip install matplotlib # ...

  9. canal部署启动的时候报错com.alibaba.druid.pool.DruidDataSource - testWhileIdle is true, validationQuery not set

    报错信息:com.alibaba.druid.pool.DruidDataSource - testWhileIdle is true, validationQuery not set 解决方法: 找 ...

  10. HSRP 实验

    一.环境准备 1. 软件:GNS3 2. 路由:c7200 二.实验操作 实验要求: 1.理解HSRP的工作原理. 2.掌握HSRP配置方法. 3.理解HSRP的抢占与跟踪作用. 实验拓扑: 实验过程 ...