Angular4自制一个市县二级联动组件

最新推荐文章于 2022-12-06 14:12:15 发布

微雨燕凝霜寒

最新推荐文章于 2022-12-06 14:12:15 发布

阅读量2k

点赞数 2

文章标签： angular2 angular4 二级联动市县选择

本文链接：https://blog.csdn.net/xu1227233860/article/details/78590610

版权

这篇博客讲述了作者在Angular4项目中实现市县二级联动组件的过程。通过选择市属或省属，动态显示或隐藏市、县级下拉框，并根据所选市级获取对应区县数据。博主详细介绍了数据获取、实体创建、数据填充以及如何监听市级选择变化来更新县级选项，最终成功完成组件的自制，提供了一种不依赖外部库的解决方案。

摘要由CSDN通过智能技术生成

最近遇到了不少问题，真的是命运多舛。Angular真是让人又爱又恨的框架，恨的是资料太少，遇到问题无从下手。爱的是许多其他框架难以做到的功能，angular却可以轻松做到。

话不多说，最近遇到了一个旧项目改造的问题。拿到前同事做的页面效果：

这里写图片描述

第一眼就看到了这三个下拉框，按捺不住好奇心的我点了点。原来，第一个下拉框可以选择市属和省属，如果选择市属，那么后面就会出现市、县级两个下拉框，如果是省属，那就隐藏了，这个挺容易的。然后就是要选择市之后，区下拉框要有对应区县选项。emmmm，很典型的二级联动，不过既然分析完了思路，那就开始做吧！首先呢，数据肯定要从后端同事那里拿，调用他的接口把数据填充进去。看看数据是什么样子的：

这里写图片描述

数据略多，就不全部贴出来了。把实体bean创建一下，

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;

    // 市县级实体构造器