以角度綁定級聯下拉按鈕

Question

我試圖從第二個下拉列表中選擇值時填充第二個下拉列表。

我只想發送從前端到后端選擇的數據。 當選擇第一個下拉菜單時，我能夠看到第二個下拉菜單。 但是當我開始使用[[ngModel）] =“”綁定數據時。 第二個下拉菜單沒有顯示。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  private map = new Map<string, string[]>([
    ['India', ['Delhi', 'Mumbai','Chennai']],
    ['USA', ['New York City', 'DC']],
  ])

  country: string;
  city: string;

  get countries(): string[] {
    return Array.from(this.map.keys());
  }

  get cities(): string[] | undefined {
    return this.map.get(this.country);
  }

}

app.component.html

<select id="dispositions" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" name="dispositions" [(ngModel)]="Adddata.dispositions">
    <option class="dropdown-item"  *ngFor = 'let country of countries' [value] ="country">{{ country }}</option>      
</select>
<select id="dispositionReasons" class="btn btn-secondary dropdown-toggle"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" name="dispositionReasons" *ngIf="dispositions" [(ngModel)]="Adddata.dispositionReasons" >
      <option class="dropdown-item" *ngFor='let city of cities' [value]="city" > {{ city }} </option>
</select>

Answer 1

您在AppComponent中沒有任何AppData，因此AppData.dispositions始終為null。 像這樣更改它：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  private map = new Map<string, string[]>([
    ['India', ['Delhi', 'Mumbai','Chennai']],
    ['USA', ['New York City', 'DC']],
  ])

  country: string;
  city: string;
  AppData: any = {'dispositions': []} ;

  get countries(): string[] {
    return Array.from(this.map.keys());
  }

  get cities(): string[] | undefined {
    return this.map.get(this.country);
  }

}

那應該使您可以訪問組件中的AppData模型。 還沒有測試過但請檢查一下並告訴我