Angular-数组循环
简单数组
.ts
-定义一个数组
// 第一种定义方式
public arr1:string[] = ['aa','bb','cc']; // 完整版
arr2:string[] = ['aa','bb','cc']; // 省略版
public objects:any[] = [{username:'Echoo',age:18},{username:'Amily',age:39},{username:'Mike',age:34}]; // 元素是对象
//第二种定义方式
public items:Array<any> = ['aa',11,'cc'];
两种定义方式效果是一样的,推荐使用第一种定义方式(
修饰符 数组名:元素类型[] = []
)
但无论使用哪种方式,都建议指明修饰符和元素类型,规范书写;
.html
-普通循环(*ngFor
)
<!-- 元素是基本数据类型-->
<ol><li *ngFor="let item of items">{{item}}</li>
</ol><!-- 元素是对象-->
<ul><li *ngFor="let item of objects">{{item.username}}----{{item.age}}</li>
</ul>
*ngFor
是Angular中定义好的标签属性,用于循环输出;
let item of xxx
是固定写法,表示遍历xxx
中的每一个元素,xxx
是具体的数组名,比如定义的数组名为items
,则完整的句子就是let item of items
;
二维数组
.ts
-定义一个数组
public cars:any[] = [{brand:'宝马',list:[{title:'宝马x1',price:'300000'},{title:'宝马x2',price:'400000'},{title:'宝马x3',price:'500000'}]},{brand:'奥迪',list:[{title:'奥迪q1',price:'600000'},{title:'奥迪q2',price:'700000'},{title:'奥迪q3',price:'800000'}]},
];