手抓手教你ionic picker组件在angular中的使用及其城市级联框的实现思路

目录

起因

在angular中的使用方式

单列框

多列

 级联

---

起因

笔者所在的项目组新起了一个angular框架的h5项目，在经过比较选择以后使用了ionic辅以ng-zorro-antd-mobile进行开发，开发过程中发现ionic官网对于angular版本的picker组件使用方法介绍较少，因而在此记录一下开发所遇到的问题与级联框的实现思路

在angular中的使用方式

单列框

html代码，在这里选用了input框

<ion-input readonly (click)="showPicker($event)">
</ion-input>

ts代码

import { Component } from '@angular/core';
import { PickerController, PickerOptions } from '@ionic/angular';

@Component({
  selector: 'app-form-cycle-group',
  templateUrl: './form-cycle-group.component.html',
  styleUrls: ['./form-cycle-group.component.scss'],
})
export class FormCycleGroupComponent implements OnInit {
  defaultColumnOptions: Array<any> = [
    { text: "Dog", value: "dog" },
    { text: "Cat", value: "cat" },
    { text: "Bird", value: "bird" },
  ];
  constructor(
    private pickerController: PickerController
  ) { }

  ngOnInit() {
  }

  async showPicker(event: any) {

    let options: PickerOptions = {
      buttons: [
        {
          text: "Cancel",
          role: 'cancel'
        },
        {
          text: 'Ok',
          handler: (value: any) => {
            console.log(value);
          }
        }
      ],
      columns: [{
        name: 'Animals',
        options: this.getColumnOptions()
      }]

    };
    let picker = await this.pickerController.create(options);
    picker.present()
  }
  getColumnOptions() {
    let options = [];
    this.defaultColumnOptions.forEach(x => {
      options.push({ text: x.text, value: x.value });
    });
    return options;
  }
}

 这里之所以使用 getColumnOptions 方法去构建 picker 组件，是因为 ionic picker 组件的bug，如果直接在options上使用所定义好的变量的话，会出现如下图的情况：

 

 解决方式便是使用一个方法来返回所得值(图中是笔者使用多列的时候出现的问题，单列有时也会出现，但当时未予以截图，因而使用多列的bug图来表示一下可能会出现这种情况)

效果图：

多列

多列与单列的区别其实不大，只是在columns属性的value数组内使用多个对象来渲染多列

 html代码

<ion-input readonly (click)="showPicker($event)">
</ion-input>

ts代码

import { Component } from '@angular/core';
import { PickerController, PickerOptions } from '@ionic/angular';

@Component({
  selector: 'app-form-cycle-group',
  templateUrl: './form-cycle-group.component.html',
  styleUrls: ['./form-cycle-group.component.scss'],
})
export class FormCycleGroupComponent implements OnInit {
  defaultColumnOptions: Array<any> = [
    { text: "Dog", value: "dog" },
    { text: "Cat", value: "cat" },
    { text: "Bird", value: "bird" },
  ];
  constructor(
    private pickerController: PickerController
  ) { }

  ngOnInit() {
  }

  async showPicker(event: any) {

    let options: PickerOptions = {
      buttons: [
        {
          text: "Cancel",
          role: 'cancel'
        },
        {
          text: 'Ok',
          handler: (value: any) => {
            console.log(value);
          }
        }
      ],
      columns: [{
        name: 'Animals',
        options: this.getColumnOptions()
      }, {
        name: 'Animals2',
        options: this.getColumnOptions()
      }, {
        name: 'Animals3',
        options: this.getColumnOptions()
      }]

    };
    let picker = await this.pickerController.create(options);
    picker.present()
  }
  getColumnOptions() {
    let options = [];
    this.defaultColumnOptions.forEach(x => {
      options.push({ text: x.text, value: x.value });
    });
    return options;
  }
}

效果图：

级联

ionic picker 组件在官网并没有级联功能，但在查阅资料后发现，其组件内的每一列都存在一个 ionPickerColChange 事件，当每列发生变化时，便会触发该事件，返回的数据结构如下

 我们可以使用这个事件，对滚动列进行监听

html代码，依旧选择输入框

<ion-input readonly (click)="showPicker($event)">
</ion-input>

 ts代码

import { Component } from '@angular/core';
import { PickerController, PickerOptions } from '@ionic/angular';

@Component({
  selector: 'app-form-cycle-group',
  templateUrl: './form-cycle-group.component.html',
  styleUrls: ['./form-cycle-group.component.scss'],
})
export class FormCycleGroupComponent implements OnInit {
  defaultColumnOptions: Array<any> = [
    { text: "Dog", value: "dog" },
    { text: "Cat", value: "cat" },
    { text: "Bird", value: "bird" },
  ];
  constructor(
    private pickerController: PickerController
  ) { }

  ngOnInit() {
  }

  async showPicker(event: any) {

    let options: PickerOptions = {
      buttons: [
        {
          text: "Cancel",
          role: 'cancel'
        },
        {
          text: 'Ok',
          handler: (value: any) => {
            console.log(value);
          }
        }
      ],
      columns: [{
        name: 'Animals',
        options: this.getColumnOptions()
      }, {
        name: 'Animals2',
        options: this.getColumnOptions()
      }, {
        name: 'Animals3',
        options: this.getColumnOptions()
      }]

    };
    let picker = await this.pickerController.create(options);
    picker.present().then(() => {
      try {
        const pickerCols = document.querySelectorAll('ion-picker-column');
        const provinceCol = pickerCols[0];
        const cityCol = pickerCols[1];
        const areaCol = pickerCols[2];
        provinceCol.addEventListener('ionPickerColChange', (event: CustomEvent) => {
          console.log(event)
        }) // 其中可添加对省份的操作
        cityCol.addEventListener('ionPickerColChange', (event: CustomEvent) => {
          console.log(event)
        }) // 其中可添加当省份变化时对市的操作
        areaCol.addEventListener('ionPickerColChange', (event: CustomEvent) => {
          console.log(event)
        }) // 其中可添加当省份、市变化时对区县的操作
      } catch (error: any) {
        console.log(error)
      }
    })
  }
  getColumnOptions() {
    let options = [];
    this.defaultColumnOptions.forEach(x => {
      options.push({ text: x.text, value: x.value });
    });
    return options;
  }
}

由于笔者当前并未获得后端接口，这个地方并没有完全完成，因而先不贴效果图了，后续获得接口后会将大概的实现逻辑在此处更新一下。