ionic 省市区三级联动

最新推荐文章于 2024-02-19 10:06:30 发布

原创最新推荐文章于 2024-02-19 10:06:30 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

ionic 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍如何安装和使用ion-multi-picker组件实现地区选择功能，包括安装步骤、配置方法及如何在Ionic项目中进行集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文为原创文章，转载请标明出处

1、安装 ion-multi-picker ;

终端运行

npm install ion-multi-picker;

2、导入 app.module.ts

 import { CookieService } 
 from 
 "ngx-cookie-service";

  imports: [
 
   ...
 
   MultiPickerModule,
 
   ...
 
   ],

3、创建 provider

ionic g provider city

省市区json文件下载地址:
https://raw.githubusercontent.com/raychenfj/ion-multi-picker/master/example/src/assets/chinese-cities.json

将json值赋给下面的 cities 变量即可。

city.ts

  @Injectable()
 
  export 
  class CityProvider {
 
  public cities=[];
 
  constructor(
  public http: HttpClient) {
 
  this.cities=[...];
 
      }
 
  }

4、html

 <
 ion-multi-picker 
 item-content [
 multiPickerColumns]=
 "cityColumns" [
 cancelText]=
 "'取消'" [
 doneText]=
 "'完成'" [(
 ngModel)]=
 "address"
 ></
 ion-multi-picker
 >

 import { CityProvider } 
 from 
 "../../providers/city/city";

 
 public cityColumns=[];

  constructor( 
  private cityProvider:CityProvider) {
 
       this.cityColumns=
   this.cityProvider.cities;
  
   }

GitHub - ion-multi-picker

一个报错

是因为在html中双向绑定的数据为空，在ts中声明就可以了