您的位置:首页 > Web前端 > AngularJS

Angular+ionic列渲数据实现单独选中折叠效果

2020-07-30 13:37 1091 查看

1,html中

<section  *ngFor="let item of getshopList">
<ion-item>
<div class="middle-content-order">
<div class="middle-order-icon">
<ion-icon name="chevron-up-outline" class="up-gray" item-right *ngIf="item.isShow" (click)="isShowtaggle(item)">
</ion-icon>
<ion-icon name="chevron-down-outline" class="down-gray" item-right *ngIf="!item.isShow" (click)="isShowtaggle(item)">
</ion-icon>
</div>
<div class="middle-order-title"><span>{{item.categoryName}}</span></div>
<div class="middle-order-null"></div>
<div class="middle-order-detail"><span>查看全部</span></div>
</div>
</ion-item>
<ion-list  *ngIf="item.isShow">
<div class="order-alert">
<div class='item-small' *ngFor="let it of item.level2">
<span> {{it.categoryName}}</span>
</div>
</div>
</ion-list>
</section>

2,ts中

getListBymemberid() {
const goodsReq = {
// storeId:'0'
}
this.rest.apiPost(goodsReq, this.rest.getListBymemberid).subscribe(res => {
const { status, msg, data } = res;
if (status == 200) {
console.log("店铺商品自定义分类");
console.log(data);
let list = res.data;
//加入isShow
list.forEach(item => {
item.isShow=false;//判断
});
this.getshopList = list;
this.selectedId = res.data.id;
} else {
console.log("请求失败");
}
});
}
//切换方法
isShowtaggle(item) {
item.isShow = !item.isShow;
}

3,效果

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: