ionic 省市区三级联动

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

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 >


    ts

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


public cityColumns=[];

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

更多

GitHub - ion-multi-picker

一个报错


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

猜你喜欢

转载自blog.csdn.net/qq_38990521/article/details/80909711
今日推荐