Angular四自制二个市县二级联合浮动组件,Angular四自制二个市县二级联动组件示例

永利皇宫402 4
永利皇宫402

你大概感兴趣的文章:

  • AngularJS完结的省市二级联动功效示例【可对接纳达成增加和删除】
  • AngularJS达成的select二级联合浮动下拉菜单功用示例

TIM截图20171120224151.png

最后再补上区县级下拉框:

永利皇宫402,到此停止,马到成功,再也不用去倚重外人的库了。

// 二级联动组件
export class CityAreaComponent implements OnInit, OnDestroy, DoCheck{
  // 声明县区级数组
  country: Array<Country>;

  constructor() {
    /** 重复代码不赘述 */
    /** 初始化数组 */
    country = [];
  }  

  /** 生命周期检测变化钩子 */
  ngDoCheck(): void {
    /** 遍历市级数组 */
    for (let i = 0; i < this.city.length; i++) {
      /** 若选择的市级id和市级数组中的id相吻合 */
      if (this.city[i].id == this.cac.countryId) {
        /** 将该索引下的counties数组赋予给区县级数组 */
        this.country = this.city[i].counties;
      }
      /** 我们无法避免直辖市的情况,所以多一重判断 */
      if (this.country.length > 0) {
        /** 为了用户体验,我们要尽量在用户选择市级城市后,默认选择一个区县级城市 */
        this.cac.country.id = this.country[0].id;
      }
    }
  }
}

<!-- 区县级下拉框 -->
<select [value]="cac.countryId" [(ngModel)]="cac.countryId" *ngIf="cac.cityType==0 && country.length > 0">
  <option *ngFor="let count of country" [value]="count.id">{{count.name}}</option>
</select>

鉴于并未有用IDE工具,以上代码大概会有小缺点和失误,若反常,请在评价提议。招待大神带领革新,感谢!

方今遇见了十分多标题,真的是命局多舛。Angular真是令人又爱又恨的框架,恨的是材质太少,蒙受难题不能出手。爱的是众多任何框架难以成功的职能,angular却得以轻便做到。

永利皇宫402 1

永利皇宫402 2

数量略多,就不整珍贵出来了。把实体bean创制一下,

// 二级联动组件
export class CityAreaComponent implements OnInit, OnDestroy {

  // 结果码 (用于页面处理显示标识)
  result_code: number;

  // 市级实体声明
  city: City[];

  // 县区级实体声明
  country: Country[];

  // 市县、区级填写实体声明
  cac: CityAndCountry;

  // 声明订阅对象
  subscript: Subscription;

  /**
  * 构造器
  * @param {CityService} service 注入服务
  */
  constructor (private service: CityService) {
    // 结果码 (-1.网络或其他异常 0.无内容 1.请求成功 2.请等待)
    this.result_code = 2;
    // 初始化填写市区、县级填写实体
    cac = new CityAndCountry();
    // 初始化数组(这步很重要,有很多人说使用数组相关函数会报未定义异常,是因为没有初始化的原因)
    this.city = [];
    this.country = [];
    // 初始化订阅对象
    this.subscript = new Subscription();
  }

  /**
  * 生命周期初始化钩子(生命周期尽量按执行顺序来写,养成好习惯)
  */
  ngOnInit(): void {
    this.getCityArea();
  }

  /** 获取市县数据 */
  getCityArea() {
    /** 将请求交付服务处理(service代码比较简单,就不贴了) */
    this.subscript = this.service.getCityArea().subscribe(res => {
      /** 获取json请求结果 */
      const result = res.json();
      /** 判断结果返回码 */
      switch (result['code']) {
        /** 请求成功,并且有值 */
        case 200:
        /** 改变初始返回码 */
        this.result_code = 1;
        /** 获取并填充数据 */
        this.city = json['city'];
        break;
        /** 其他情况不重复赘述 */
      }
    }, err => {
      /** 显示预设异常信息提示给用户 */
      this.result_code = -1;
      /** 打印log,尽量使用日志产出 */
      console.error(err);
    });
  }

  /** 生命周期销毁钩子 */
  ngOnDestroy(): void {
    /** 取消订阅 */
    this.subscript.unsubscribe();
  }
}
Typescript code

// 二级联动组件
export class CityAreaComponent implements OnInit, OnDestroy, DoCheck{
    // 声明县区级数组
    country: Array<Country>;

    constructor() {
        /** 重复代码不赘述 */
        /** 初始化数组 */
        country = [];
    }   

    /** 生命周期检测变化钩子 */
    ngDoCheck(): void {
        /** 遍历市级数组 */
        for (let i = 0; i < this.city.length; i++) {
            /** 若选择的市级id和市级数组中的id相吻合 */
            if (this.city[i].id == this.cac.countryId) {
                /** 将该索引下的counties数组赋予给区县级数组 */
                this.country = this.city[i].counties;
            }
            /** 我们无法避免直辖市的情况,所以多一重判断 */
            if (this.country.length > 0) {
                /** 为了用户体验,我们要尽量在用户选择市级城市后,默认选择一个区县级城市 */
                this.cac.country.id = this.country[0].id;
            }
        }
    }
}

以上就是本文的全体内容,希望对大家的学习抱有接济,也愿意我们多多扶助脚本之家。

实业完毕了,起先筹划获取数据并填充至实体:

永利皇宫402 3

鉴于这里是单服务请求,为了让代码相比较清晰直观,这里自身就不做封装管理了。数据获得了后来就该填充到体现分界面了:

// 市级实体类
export class City {

  // 市级id
  cityId: string;

  // 所属类型(0.市属 1.省属)
  cityType: number;

  // 市级名称(可选属性,若cityType为1时,可不填)
  cityName: string;

  // 所属区县
  counties?: Array<Country>;

}

// 区县级实体类
export class Country {

  // 区县id
  countryId: string;

  // 区县名称
  countryName: string;

}

// 填写市县类
export class CityAndCountry {

  // 市级id
  cityId: string;

  // 县级id
  countryId: string;

  // 市级类型
  cityType: number;

  // 市县级实体构造器 
  constructor() {
    // 给市级id赋予一个真实城市的id初始值
    this.cityId = '***';
    // 同上
    this.countryId = '***';
    // 同上
    this.cityType = 0;
  }
}

TIM截图20171120223424.png

是因为这里是单服务请求,为了让代码相比清晰直观,这里本人就不做封装管理了。数据拿到了随后就该填充到显示界面了:


<!-- 所属类型(此处固定,一般为获取后端数据字典数据) -->
<select class="city_type" [value]="cac.cityType" [(ngModel)]="cac.cityType">
  <!-- 所传内容为整数型 -->
  <option value=0>市属</option>
  <option value=1>省属</option>
</select>

<!-- 市级选择(类型为省属时隐藏) -->
<select class="city" [value]="cac.cityId" [(ngModel)]="cac.cityId" *ngIf="city.cityType==0">
  <!-- 遍历城市数组 -->
  <option *ngFor="let opt of option" [value]="opt.cityId">{{opt.cityName}}</option>
</select>

那会儿,大家开掘县级获取起来好像并不可能直接获得,怎么办吧?小编恍然想到,小编在ts里面声Bellamy(Bellamy)个变量获取市级选用的id号,然后再拿id去找上边县区,这样就可以轻松得到了。既然要实时获取变化,那我们就兑现检查评定变化钩子:

数码略多,就不全爱慕出来了。把实体bean成立一下,

最后再补上区或县级下拉框:

到此截至,旗开得胜,再也不用去正视别人的库了。

近年来遇上了无数主题素材,真的是命局多舛。Angular真是令人又爱又恨的框架,恨的是质地太少,碰着难点得不到入手。爱的是无数任何框架难以完结的成效,angular却得以轻巧做到。

实体落成了,早先希图获取数据并填充至实体:

永利皇宫402 4

此时,大家发掘县级获取起来好像并不能够平素拿走,怎么做呢?笔者豁然想到,小编在ts里面声澳优(Ausnutria Hyproca)个变量获取市级选拔的id号,然后再拿id去找上面县区,那样就足以轻巧获得了。既然要实时获取变化,那我们就兑现检验变化钩子:

话相当的少说,近期遇见了2个旧项目退换的主题素材。获得前同事做的页面效果:

话十分的少说,近些日子遇上了八个旧项目退换的难题。得到前同事做的页面效果:

Typescript code

// 二级联动组件
export class CityAreaComponent implements OnInit, OnDestroy {

    // 结果码 (用于页面处理显示标识)
    result_code: number;

    // 市级实体声明
    city: City[];

    // 县区级实体声明
    country: Country[];

    // 市县、区级填写实体声明
    cac: CityAndCountry;

    // 声明订阅对象
    subscript: Subscription;

    /**
    * 构造器
    * @param {CityService} service 注入服务
    */
    constructor (private service: CityService) {
        // 结果码 (-1.网络或其他异常 0.无内容 1.请求成功 2.请等待)
        this.result_code = 2;
        // 初始化填写市区、县级填写实体
        cac = new CityAndCountry();
        // 初始化数组(这步很重要,有很多人说使用数组相关函数会报未定义异常,是因为没有初始化的原因)
        this.city = [];
        this.country = [];
        // 初始化订阅对象
        this.subscript = new Subscription();
    }

    /**
    * 生命周期初始化钩子(生命周期尽量按执行顺序来写,养成好习惯)
    */
    ngOnInit(): void {
        this.getCityArea();
    }

    /** 获取市县数据 */
    getCityArea() {
        /** 将请求交付服务处理(service代码比较简单,就不贴了) */
        this.subscript = this.service.getCityArea().subscribe(res => {
            /** 获取json请求结果 */
            const result = res.json();
            /** 判断结果返回码 */
            switch (result['code']) {
                /** 请求成功,并且有值 */
                case 200:
                /** 改变初始返回码 */
                this.result_code = 1;
                /** 获取并填充数据 */
                this.city = json['city'];
                break;
                /** 其他情况不重复赘述 */
            }
        }, err => {
            /** 显示预设异常信息提示给用户 */
            this.result_code = -1;
            /** 打印log,尽量使用日志产出 */
            console.error(err);
        });
    }

    /** 生命周期销毁钩子 */
    ngOnDestroy(): void {
        /** 取消订阅 */
        this.subscript.unsubscribe();
    }
}

先是眼就看到了那八个下拉框,迫在眉睫好奇心的本人点了点。原本,第3个下拉框能够挑选市属和省属,如若选用市属,那么前面就能现身市、县级八个下拉框,假如是省属,那就隐藏了,那些挺轻易的。然后就是要选用市之后,区下拉框要有对应区或县摘取。emmmm,很规范的二级联动,然而既然分析完了思路,这就初阶做吗!首先呢,数据一定要从后端同事这里拿,调用他的接口把数据填充进去。看看数据是何等体统的:

Html code

<!-- 所属类型(此处固定,一般为获取后端数据字典数据) -->
<select class="city_type" [value]="cac.cityType" [(ngModel)]="cac.cityType">
    <!-- 所传内容为整数型 -->
    <option value=0>市属</option>
    <option value=1>省属</option>
</select>

<!-- 市级选择(类型为省属时隐藏) -->
<select class="city" [value]="cac.cityId" [(ngModel)]="cac.cityId" *ngIf="city.cityType==0">
    <!-- 遍历城市数组 -->
    <option *ngFor="let opt of option" [value]="opt.cityId">{{opt.cityName}}</option>
</select>

首先眼就见到了那多少个下拉框,等不如好奇心的自身点了点。原本,第二个下拉框能够挑选市属和省属,如若采取市属,那么前面就能够出现市、县级七个下拉框,倘诺是省属,那就暗藏了,这么些挺轻松的。然后正是要选拔市之后,区下拉框要有对应区县采取。emmmm,很特出的二级联合浮动,可是既然解析完了思路,那就先河做呢!首先呢,数据肯定要从后端同事这里拿,调用他的接口把数据填充进去。看看数据是怎么样样子的:

Html code

<!-- 区县级下拉框 -->
<select [value]="cac.countryId" [(ngModel)]="cac.countryId" *ngIf="cac.cityType==0 && country.length > 0">
    <option *ngFor="let count of country" [value]="count.id">{{count.name}}</option>
</select>
Typescript code

// 市级实体类
export class City {

    // 市级id
    cityId: string;

    // 所属类型(0.市属 1.省属)
    cityType: number;

    // 市级名称(可选属性,若cityType为1时,可不填)
    cityName: string;

    // 所属区县
    counties?: Array<Country>;

}

// 区县级实体类
export class Country {

    // 区县id
    countryId: string;

    // 区县名称
    countryName: string;

}

// 填写市县类
export class CityAndCountry {

    // 市级id
    cityId: string;

    // 县级id
    countryId: string;

    // 市级类型
    cityType: number;

    // 市县级实体构造器 
    constructor() {
        // 给市级id赋予一个真实城市的id初始值
        this.cityId = '***';
        // 同上
        this.countryId = '***';
        // 同上
        this.cityType = 0;
    }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图