当前位置： 移动技术网 > IT编程>网页制作>HTML > Angular+ionic实现选择分类功能

Angular+ionic实现选择分类功能

2020年07月21日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网