Angular 6 table 中的自定义下拉列表

Question

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

我尝试将 and 标记在一起，但不符合要求

<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>

Answer 1

我认为这段代码可以帮助你

<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;
    }

  }
}

Angular 6 table 中的自定义下拉列表

Custom drop down in Angular 6 table

angular6