Angular 数据循环

.html

<h1>angular里面的数据循环</h1>
<ul><li *ngFor="let item of arr">{{item}}</li>
</ul><ul><li *ngFor="let item of list">{{item}}</li>
</ul><ul><li *ngFor="let item of items">{{item}}</li>
</ul><ul><li *ngFor="let item of userList">{{item.name}}--{{item.age}}</li>
</ul><ul><li *ngFor="let item of cars"><h2>{{item.cate}}</h2><ol><li *ngFor="let car of item.list">{{car.title}}--{{car.price}}</li></ol></li>
</ul>

.ts

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-news',templateUrl: './news.component.html',styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {//定义数组arr=['111','222','333']public list:any[]=['我是一个帅哥','我是一个明星','我是一个冒险家'];public items:Array<string>=['科比','詹姆斯','杜兰特'];public userList:any[]=[{name:'张三',age:20},{name:'李四',age:30},{name:'王二',age:40}];public cars:any[]=[{cate:'宝马',list:[{title:'宝马x1',price:'40W'},{title:'宝马x2',price:'45W'},{title:'宝马x3',price:'46W'}],},{cate:'奥迪',list:[{title:'奥迪x1',price:'40W'},{title:'奥迪x2',price:'41W'},{title:'奥迪x3',price:'409'}],}]constructor() { }ngOnInit(): void {}
}

Angular 数据循环相关推荐

Angular数据循环 *ngFor 与条件判断 *ngif 和 *ngSwitch
Angular数据循环 *ngFor 与条件判断 *ngif 和 *ngSwitch 首先,进行Angular环境的搭建和项目创建 ctrl + c 结束服务 1.新建模块 ng g compone ...
Angular中数据循环ngFor、条件判断ngIf、ngSwitch、执行事件(click)、表单事件(keyup)、ngClass、ngStyle的使用
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
Angular数据双向绑定
本文转载自: http://www.cnblogs.com/jingwhale/p/5117419.html 作者:jingwhale 转载请注明该声明. Angular数据双向绑定 AngularJ ...
Python之pandas：将dataframe数据写入到xls表格的多个sheet内(防止写入数据循环覆盖sheet表)
Python之pandas:将dataframe数据写入到xls表格的多个sheet内(防止写入数据循环覆盖sheet表) 目录将dataframe数据写入到xls表格的多个sheet内(防止写入数 ...
编写一个程序，实现将存放在AX和DX中的32位数据循环右移二进制数的4位。（DX存放高字节内容，AX存放低字节内容）
编写一个程序,实现将存放在AX和DX中的32位数据循环右移二进制数的4位.(DX存放高字节内容,AX存放低字节内容) P151 例4.9 汇编思路: AX右移四位后,使用BH接收AL的低四位数据,得到 ...
python输入文字、成为字典_python中将字典形式的数据循环插入Excel
1.我们看到字典形式的数据如下所示 list=[["2891-1", "D"],["2892-1", "D"],[&qu ...
原生JS 将json数据循环遍历到HTML中
原生JS 将数组的数据循环遍历到HTML中 html如下(图片地址为本地保存的)<div id="article"><!-- <div class=&quo ...
易优cms foreach 数据循环输出标签
[基础用法] 标签:foreach 描述:数据/记录循环输出标签(注:类似与volist标签,只是更加简单,没有太多额外的属性.) 用法: {eyou:channel type='top'} {eyo ...
uni-app数据循环
通过 v-for 来指定要循环的数组,item和index分别为循环想和循环索引,:key指定唯一的属性,来提高循环效率数据: 数据循环: 结果:
vue+ele 实现v-for动态数据循环表单，然后对每个结构进行表单校验的方法
vue+ele 实现v-for动态数据循环表单,然后对每个结构进行表单校验的方法项目开发时遇到form结构是动态遍历出来的,但是每个遍历出来的表单都需要做相对应的检验处理,ele提供的办法只能对单个 ...

Angular 数据循环

Angular 数据循环相关推荐

最新文章

热门文章