0

我有一个模型驱动表单，有 2 个选择，“州”和“城市”。模型如下所示：

class State{
stateID : number;
stateName : String,
cities : City[]
}
class City{
cityID : number,
cityName : String
}

我正在从州的选择中填充城市选项列表，因为我在 State[] 'stateList' 中拥有所有可用数据。

    <select formControlName="state" (onchange)="getCityNameByState($event.target.value)">
                <option *ngFor="let stateName of stateList" [value]= "stateID">
                  {{stateName}}</option>

select formControlName="city">
                  <option *ngFor="let cityName of cityList" [value]= "cityID">
              {{cityName}}</option>

这里的问题是 cityList 是通过选择一组州和城市选择的州而形成的。但是因为我在这里有一个动态的 FormBuilder，所以可以有多组 State & City 选择。每次选择 State 时，都会更改 cityList，而不是填充 FormGroup 中对应的 State。我正在考虑为每个州单独选择动态生成一个单独的城市列表，但不确定这是否是合适的解决方案。有人可以在这里帮忙吗。

4

1 回答 1

0

如果您需要不同的列表，则需要不同的变量。你可以创建一个城市数组，或者创建一个包含城市数组的对象。一个例子。

你必须创建

cities:string[][]=[
   [{name:"Alabama"},{name:"Boston"}...],
   [{name:"Madrid"},{name:"Barcelona"}..]
   ....
]
//Or
cities:any={
  USA:[{name:"Alabama"},{name:"Boston"}...],
  Spain:[{name:"Madrid"},{name:"Barcelona"}..]
}

那么你做的循环就结束了

<div *ngFor="let city of cities[index]"> 
 or 
 <div *ngFor="let city of cities[dataForm.get('country').value]>

更新

@RandomGuy，您拥有三样不同的东西：您的表单、为表单提供数据的数据和状态数据。的数据说明您用于创建选项的数据。

起初这个数据会像

dataStates=[
   {stateID:"AL",name="Alaska",cities:[]},
   {stateID="CL",name="California",cities:[]}
   ...all the rest of states...
]

<select formControlName="stateID" (onchange)="getCities($event.target.value)">
    <options *ngFor="let item of dataStates" [value]="item.statedID">
       {{item.name}}
    </option>
 </select>
<select formControlName="cityID" >
  <!-the options will be dataStates.find(d=>d.stateId==myArray.get('statedID').value)-->
    <options *ngFor="let city of dataStates.find(d=>d.stateId==myArray.get('statedID').value).cities" [value]="city.cityID">{{city.name}}
       {{city.name}}
    </option>
 </select>

函数 getCities

//get cities check if cities of the data exist. If not fill the cities
getCities(stateID:string)
{
   let index=this.dataStates.findIndex(p=>p.stateID==stateID)
   if (index>=0){ //Always must be index>0
       if (this.dataStates.cities.length<=0)  //is not fill yet
       {
           this.httpClient.get(url+"/"+stateID).subscribe(res=>{
                 this.dataStates[index].cities=res;
           })
       }
}

这样，您只搜索表格中的州的城市（不是所有城市）

于 2018-09-30T10:29:32.830 回答