使用打字稿在角度级联下拉菜单

Question

我从 Angular 中的三个 diff API 获得响应。 所有的 API 都在 ngOnInit 中调用，因为我们相互依赖。 如果我从第一个下拉列表中选择“印度”，如何制作级联下拉列表，那么印度的所有城市都应该出现在第二个下拉列表中，当我从第二个下拉列表中选择德里时，德里的所有值都应该出现在第三个下拉列表中

API 1 响应

{id: 0, name: "India"}
{id: 1, name: "US"}

API 2 响应

{id: 0, name: "India", city: "delhi"}
{id: 1, name: "US", city: "NYK"}
{id: 2, name: "India", city: "chennai"}
{id: 3, name: "US", city: "WDC"}
{id: 4, name: "India", city: "mumbai"}
{id: 5, name: "India", city: "NewJs"}

API 3 响应

{id: 0, name: "block1", dist: "delhi"}
{id: 1, name: "block2", dist: "NYK"}
{id: 2, name: "block3", dist: "Chennai"}
{id: 3, name: "block4", dist: "delhi"}
{id: 4, name: "block5", dist: "WDC"}
{id: 5, name: "block6", dist: "NewJs"}
{id: 6, name: "block7", dist: "mumbai"}
{id: 7, name: "block8", dist: "delhi"}
{id: 8, name: "block9", dist: "NYK"}

组件.ts

export class CreateInfraRequestComponent implements OnInit {
 Country:any;
 City:any;
 Block:any;
 selectedCountry:any;
 selectedCity:any;
 selectedBlock:any;
 constructor(private infraService : InfraRequestService){  };
 ngOnInit(): void {
    this.getAllCountry();
    this.getAllCity();
    this.getAllblock();
}
getAllCountry (){
  this.infraService.getAllInfraRequest("apiUrlForCountyr").subscribe((data)=>{
  this.Country=data;
    console.log(data);
  });
}

getAllCity(){
    this.infraService.getAllInfraRequest("apiUrlForCity").subscribe((data)=>{
    this.City=data;
     console.log(data);
    });    
}
getAllblock(){
  this.infraService.getAllInfraRequest("apiUrlForBlock").subscribe((data)=>{
  this.Block=data;
    console.log(data);
  });    
}

}

component.html

<select [(ngModel)]="selectedCountry">                   
        <option *ngFor="let country of Country" [value]="country.name">
          {{country.name}}
        </option>            
    </select>
  <select [(ngModel)]="selectedCity">                   
        <option *ngFor="let city of City" [value]="city.name">
          {{city.name}}
        </option>            
    </select>
  <select [(ngModel)]="selectedBlock">                   
        <option *ngFor="let block of Block" [value]="block.name">
          {{block.name}}
        </option>            
    </select>

Answer 1

解决问题的一种方法是通过更改事件监听更改。你想做的是

• 每次选择更改发生时触发更改事件：

  {国家的名字}}

• 然后在 ts 文件中使用 - 访问值并将其分配给下一个选择项

  onChange(newValue) {
  console.log(newValue);
  this.City = newValue;
  }
  

这篇文章可以进一步帮助您： How can I get new selection in "select" in Angular 2?