Question

我有一个模型驱动的表单，其中有两个选择，即“州”和“城市”。这些模型如下所示：

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由选择州形成，这对于1组州和城市选择是可以的。但是由于我这里有一个动态的FormBuilder，因此可以有多组State＆City选择。每次选择状态时，都会更改cityList，而不是为其填充FormGroup中的相应状态。我正在考虑为每个选择的州动态生成一个单独的cityList，但不确定这是否合适。有人可以帮忙吗？

Answer 1

如果需要其他列表，则需要不同的变量。您可以执行以下操作：创建一个由城市组成的数组，或者创建一个具有一个城市组成的对象。一个例子。

您必须创建

<button type="button" onclick="document.getElementById('countries').innerHTML = random_countries(country_list)">Click for random country</button>
<p id="countries"> </p>

<h3>Selected countries:</h3>
<p id="selected_countries"></p>

<script>
function random_countries(country_list)
{
 const randomNumber = Math.floor(Math.random()*country_list.length);
 document.getElementById("selected_countries").innerHTML = sel_count_arr.push(country_list[randomNumber]); // push the country on button click
 return country_list[randomNumber];
}
var country_list = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &amp; Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas"
	,"Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia &amp; Herzegovina","Botswana","Brazil","British Virgin Islands"
	,"Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica"
	,"Cote D Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea"
	,"Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana"
	,"Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India"
	,"Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kuwait","Kyrgyz Republic","Laos","Latvia"
	,"Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Mauritania"
	,"Mauritius","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Namibia","Nepal","Netherlands","Netherlands Antilles","New Caledonia"
	,"New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal"
	,"Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre &amp; Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles"
	,"Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts &amp; Nevis","St Lucia","St Vincent","St. Lucia","Sudan"
	,"Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad &amp; Tobago","Tunisia"
	,"Turkey","Turkmenistan","Turks &amp; Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States","United States Minor Outlying Islands","Uruguay"
	,"Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];

var sel_count_arr = [];



</script>

然后循环结束

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

更新

@RandomGuy，您有三件事：表格，提供表格的数据和州的数据。状态数据用于创建选项的数据。

首先，这些数据将类似于

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

getCities函数

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>

通过这种方式，您仅搜索具有以下形式的州的城市（并非所有城市）

如何在FormBuilder中为选择设置单个选项列表

1 个答案: