Angular6 角度6表格中的自定义下拉列表

我是英语初学者。我需要一个自定义下拉功能在一个创建组件。我使用表格供用户输入值。我将区域（CLT、EKM、TVM）的主要输入作为一个表格单元格中的下拉列表。辅助输入是每个分区下的分区（每个分区2或3个分区）。如果在主单元格中选择CLT，则KZD和WND仅显示在辅助下拉列表中，依此类推

我尝试将和标记在一起，但未满足要求

<form class="form-inline" (ngSubmit)="onSubmit(f)" #f="ngForm">
    <br>
    <br>
<table class="table">
  <tr>
<td><input type="text" name="SiteName" ngModel></td>
      <td>Zone</td>
      <td ><select id="Zone" name="Zone" ngModel width="300px">
          <option></option>
          <option>CLT</option>
          <option>EKM</option>
          <option>TVM</option>
          </select></td>   
<td>District</td>
      <td ><select id="District" name="District" ngModel width="300px">
          <option></option>
          <option>KZD</option>
          <option>WND</option>
          <option>MLP</option>
          <option>PKD</option>
          <option>TSR</option>
          <option>IDK</option>
          <option>KLM</option>
          <option>ALP</option>
        </select></td>  
</tr>
</table>
        <button class="btn btn-primary" >Add site</button>    
      </form>
    </div>

区
CLT
EKM
TVM
地区
KZD
WND
MLP
PKD
TSR
IDK
荷航
阿尔卑斯山
添加站点

我想这段代码可以帮助你

<form class="form-inline" (ngSubmit)="onSubmit(f)" #f="ngForm">
        <br>
        <br>
    <table class="table">
      <tr>
          <td><input type="text" name="SiteName" ngModel></td>
          <td>Zone</td>
          <td >
             <select #drop1 id="Zone" name="Zone" (change)="changes(drop1)"width="300px">
              <option></option>
              <option>CLT</option>
              <option>EKM</option>
              <option>TVM</option>
              </select></td>   
          <td>District</td>
          <td >
            <select id="District" name="District" ngModel width="300px">
              <option *ngFor="let item of items;">{{item}}</option>
            </select>
          </td>  
    </tr>
    </table>
            <button class="btn btn-primary" >Add site</button>    
    </form>

export class AppComponent  {
  name = 'Angular';
  items:any='';
  changes(t){
    switch(t.value){
      case 'CLT' : 
      this.items=['KZD','WND'];
      break;
      case 'EKM' : 
      this.items=['MLP','PKD'];
      break;
    }

  }
}