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