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