如何使用Angular 4 typescript绑定表格中的级联下拉菜单？

// 定义数据模型
export interface Country {
  id: number;
  name: string;
}

export interface City {
  id: number;
  name: string;
  countryId: number;
}

// 定义数据源
export const countries: Country[] = [
  { id: 1, name: 'Country 1' },
  { id: 2, name: 'Country 2' },
  { id: 3, name: 'Country 3' }
];

export const cities: City[] = [
  { id: 1, name: 'City 1', countryId: 1 },
  { id: 2, name: 'City 2', countryId: 1 },
  { id: 3, name: 'City 3', countryId: 2 },
  { id: 4, name: 'City 4', countryId: 2 },
  { id: 5, name: 'City 5', countryId: 3 },
  { id: 6, name: 'City 6', countryId: 3 }
];

import { Component } from '@angular/core';
import { Country, City, countries, cities } from './data';

@Component({
  selector: 'app-table',
  template: `
    <table>
      <thead>
        <tr>
          <th>Country</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let country of countries">
          <td>
            <select [(ngModel)]="country.id" (change)="onCountryChange(country)">
              <option *ngFor="let c of countries" [value]="c.id">{{ c.name }}</option>
            </select>
          </td>
          <td>
            <select [(ngModel)]="country.cityId">
              <option *ngFor="let city of cities" [value]="city.id" [disabled]="city.countryId !== country.id">{{ city.name }}</option>
            </select>
          </td>
        </tr>
      </tbody>
    </table>
  `
})
export class TableComponent {
  countries: Country[] = countries;
  cities: City[] = cities;

  onCountryChange(country: Country) {
    country.cityId = null; // 重置城市选择
  }
}