Angular+ionic实现选择分类功能
程序员文章站
2022-03-20 23:29:57
Angular+ionic实现选择分类功能1.html中
Angular+ionic实现选择分类功能
1.html中
<div class="shop-types-left">
<ion-scroll zooming="true" direction="xy" style="width: 190px; height: 1000px">
<div class="shop-types-left-cell">
<div [ngClass]="checkedClass == item.id ? 'class-li-sel class-li' : 'class-li'"
*ngFor="let item of classList" (click)="changeClass(item.id)">{{item.lableName}}</div>
</div>
</ion-scroll>
</div>
2,ts中
import { Component, OnInit } from '@angular/core';
import { RestService } from '../../service'
@Component({
selector: 'app-classify-tab',
templateUrl: './classify-tab.page.html',
styleUrls: ['./classify-tab.page.scss'],
})
export class ClassifyTabPage implements OnInit {
public classList = [] // 分类列表
public selectedClassList = []
constructor(
private rest: RestService,
) { }
// 当前选中的分类
checkedClass = null
// 获取分类列表,访问接口:getMarketLable
async getClassList() {
this.rest.apiGet(this.rest.getMarketLable).subscribe(res => {
const { status, msg, data } = res;
if (status == 200) {
console.log(data);
this.classList = data;
if (this.classList.length > 0) {
this.checkedClass = this.classList[0].id
this.getproductListByClass();
}
} else {
console.log("请求失败");
}
});
}
// 根据产品分类获取产品列表,访问接口:getMarketClass
async getproductListByClass() {
const req = {
'id': this.checkedClass
}
this.rest.apiGetReq(req,this.rest.getMarketClass).subscribe(res => {
const { status, msg, data } = res;
if (status == 200) {
this.selectedClassList=data;
console.log(res.data);
} else {
console.log("请求失败");
}
})
}
ngOnInit() {
}
//选中事件
changeClass(currentClass) {
this.checkedClass = currentClass;
this.getproductListByClass()
}
ionViewWillEnter() {
this.getClassList()
}
}
3,主要思路:
异步获取数据,
post传参查询数据,
根据选中事件渲染展示。
4,实现功能:根据不同的商品类型,选中切换渲染页面。
本文地址:https://blog.csdn.net/weixin_44794123/article/details/107461700
上一篇: vuecil3+版本下如何兼容谷歌ie等不支持es6的低版本浏览器
下一篇: ExtJS 入门