实现效果如下,实现多选和取消的功能:
定义一个数组为lists,用来存放上面列举的列表,数据格式如下,其中status为标识该图片是否已选:
lists: any = [
{
id: 1,
img: './assets/img/pic/c1.png',
name: '展会',
status: true
},
{
id: 2,
img: './assets/img/pic/c2.png',
name: '讲座',
status: false
},
{
id: 3,
img: './assets/img/pic/c3.png',
name: '演唱会',
status: false
}
]
一、页面显示 html
<div class="r-cnt">
<div class="r-item" *ngFor="let i of lists" (click)="chooseItems(i.id)">