// 市級(jí)實(shí)體類
export class City {

  // 市級(jí)id
  cityId: string;

  // 所屬類型(0.市屬 1.省屬)
  cityType: number;

  // 市級(jí)名稱(可選屬性，若cityType為1時(shí)，可不填)
  cityName: string;

  // 所屬區(qū)縣
  counties?: Array<Country>;

}

// 區(qū)縣級(jí)實(shí)體類
export class Country {

  // 區(qū)縣id
  countryId: string;

  // 區(qū)縣名稱
  countryName: string;

}

// 填寫(xiě)市縣類
export class CityAndCountry {

  // 市級(jí)id
  cityId: string;

  // 縣級(jí)id
  countryId: string;

  // 市級(jí)類型
  cityType: number;

  // 市縣級(jí)實(shí)體構(gòu)造器 
  constructor() {
    // 給市級(jí)id賦予一個(gè)真實(shí)城市的id初始值
    this.cityId = '***';
    // 同上
    this.countryId = '***';
    // 同上
    this.cityType = 0;
  }
}

// 二級(jí)聯(lián)動(dòng)組件
export class CityAreaComponent implements OnInit, OnDestroy {

  // 結(jié)果碼 (用于頁(yè)面處理顯示標(biāo)識(shí))
  result_code: number;

  // 市級(jí)實(shí)體聲明
  city: City[];

  // 縣區(qū)級(jí)實(shí)體聲明
  country: Country[];

  // 市縣、區(qū)級(jí)填寫(xiě)實(shí)體聲明
  cac: CityAndCountry;

  // 聲明訂閱對(duì)象
  subscript: Subscription;

  /**
  * 構(gòu)造器
  * @param {CityService} service 注入服務(wù)
  */
  constructor (private service: CityService) {
    // 結(jié)果碼 (-1.網(wǎng)絡(luò)或其他異常 0.無(wú)內(nèi)容 1.請(qǐng)求成功 2.請(qǐng)等待)
    this.result_code = 2;
    // 初始化填寫(xiě)市區(qū)、縣級(jí)填寫(xiě)實(shí)體
    cac = new CityAndCountry();
    // 初始化數(shù)組(這步很重要，有很多人說(shuō)使用數(shù)組相關(guān)函數(shù)會(huì)報(bào)未定義異常，是因?yàn)闆](méi)有初始化的原因)
    this.city = [];
    this.country = [];
    // 初始化訂閱對(duì)象
    this.subscript = new Subscription();
  }

  /**
  * 生命周期初始化鉤子(生命周期盡量按執(zhí)行順序來(lái)寫(xiě)，養(yǎng)成好習(xí)慣)
  */
  ngOnInit(): void {
    this.getCityArea();
  }

  /** 獲取市縣數(shù)據(jù) */
  getCityArea() {
    /** 將請(qǐng)求交付服務(wù)處理(service代碼比較簡(jiǎn)單，就不貼了) */
    this.subscript = this.service.getCityArea().subscribe(res => {
      /** 獲取json請(qǐng)求結(jié)果 */
      const result = res.json();
      /** 判斷結(jié)果返回碼 */
      switch (result['code']) {
        /** 請(qǐng)求成功，并且有值 */
        case 200:
        /** 改變初始返回碼 */
        this.result_code = 1;
        /** 獲取并填充數(shù)據(jù) */
        this.city = json['city'];
        break;
        /** 其他情況不重復(fù)贅述 */
      }
    }, err => {
      /** 顯示預(yù)設(shè)異常信息提示給用戶 */
      this.result_code = -1;
      /** 打印log，盡量使用日志產(chǎn)出 */
      console.error(err);
    });
  }

  /** 生命周期銷毀鉤子 */
  ngOnDestroy(): void {
    /** 取消訂閱 */
    this.subscript.unsubscribe();
  }
}

<!-- 所屬類型(此處固定，一般為獲取后端數(shù)據(jù)字典數(shù)據(jù)) -->
<select class="city_type" [value]="cac.cityType" [(ngModel)]="cac.cityType">
  <!-- 所傳內(nèi)容為整數(shù)型 -->
  <option value=0>市屬</option>
  <option value=1>省屬</option>
</select>

<!-- 市級(jí)選擇(類型為省屬時(shí)隱藏) -->
<select class="city" [value]="cac.cityId" [(ngModel)]="cac.cityId" *ngIf="city.cityType==0">
  <!-- 遍歷城市數(shù)組 -->
  <option *ngFor="let opt of option" [value]="opt.cityId">{{opt.cityName}}</option>
</select>

// 二級(jí)聯(lián)動(dòng)組件
export class CityAreaComponent implements OnInit, OnDestroy, DoCheck{
  // 聲明縣區(qū)級(jí)數(shù)組
  country: Array<Country>;

  constructor() {
    /** 重復(fù)代碼不贅述 */
    /** 初始化數(shù)組 */
    country = [];
  }  

  /** 生命周期檢測(cè)變化鉤子 */
  ngDoCheck(): void {
    /** 遍歷市級(jí)數(shù)組 */
    for (let i = 0; i < this.city.length; i++) {
      /** 若選擇的市級(jí)id和市級(jí)數(shù)組中的id相吻合 */
      if (this.city[i].id == this.cac.countryId) {
        /** 將該索引下的counties數(shù)組賦予給區(qū)縣級(jí)數(shù)組 */
        this.country = this.city[i].counties;
      }
      /** 我們無(wú)法避免直轄市的情況，所以多一重判斷 */
      if (this.country.length > 0) {
        /** 為了用戶體驗(yàn)，我們要盡量在用戶選擇市級(jí)城市后，默認(rèn)選擇一個(gè)區(qū)縣級(jí)城市 */
        this.cac.country.id = this.country[0].id;
      }
    }
  }
}

<!-- 區(qū)縣級(jí)下拉框 -->
<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>