Angular通过ngModel,ngFor、*ngIf和rxjs等核心特性和库减少了动态级联下拉框的开发难度。以下是一个简单的实现示例:
export class AppComponent {
states: any[] = [
{id: 1, name: '江苏省'},
{id: 2, name: '浙江省'},
{id: 3, name: '安徽省'},
//...
];
cities: any[] = [
{id: 1, name: '南京', state_id: 1},
{id: 2, name: '苏州', state_id: 1},
{id: 3, name: '杭州', state_id: 2},
{id: 4, name: '宁波', state_id: 2},
{id: 5, name: '合肥', state_id: 3},
//...
];
districts: any[] = [
{id: 1, name: '玄武区', city_id: 1},
{id: 2, name: '白下区', city_id: 1},
{id: 3, name: '保税区', city_id: 3},
{id: 4, name: '江干区', city_id: 3},
{id: 5, name: '拱墅区', city_id: 4},
//...
];
selectedState: any = {};
selectedCity: any = {};
selectedDistrict: any = {};
citiesByState: any[] = [];
districtsByCity: any[] = [];
}
下一篇:Angular未检测到更改