欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

相关标签: ionic4 angular