正文
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> <!--取反-->
