1

我正在处理 Angular 4 反应式表单。这里我有一个带有一些输入字段的表单。基于一个字段数据，即将到来的字段数据将被更改。我需要根据之前使用 angular 的下拉选择显示国家/地区和所有城市4.我尝试了很多，但我没有得到有效的解决方案。任何人都可以帮助我使用这个 json 对它进行排序。

{  
"Countries":[  
  { 
    "id":0,
    "CountryName":"Indonesia",
    "States":[  
        {  
           "id":0,
           "StateName":"Bali",
           "Cities":[
                {
                    "id":0,
                    "CityName":"Denpasar",
                    "Municipalities":[
                        {"id":0,"MunName":"Mun1"},
                        {"id":1,"MunName":"Mun2"},
                        {"id":2,"MunName":"Mun3"}
                    ]
                },

                {
                    "id":1,
                    "CityName":"Kuta",
                    "Municipalities":[
                        {"id":0,"MunName":"Mun4"},
                        {"id":1,"MunName":"Mun5"},
                        {"id":2,"MunName":"Mun6"}
                    ]
                },

                {
                    "id":2,
                    "CityName":"Tuban",
                    "Municipalities":[
                        {"id":0,"MunName":"Mun7"},
                        {"id":1,"MunName":"Mun8"},
                        {"id":2,"MunName":"Mun9"}
                    ]
                }
            ]
        }, 
        {  
           "id":1,
           "StateName":"Badgis",
           "Cities":[
                {
                    "id":0,
                    "CityName":"Denpasar",
                    "Municipalities":[
                        {"id":0,"MunName":"Mun1"},
                        {"id":1,"MunName":"Mun2"},
                        {"id":2,"MunName":"Mun3"}
                    ]
                },

                {
                    "id":1,
                    "CityName":"Andarab",
                    "Municipalities":[
                        {"id":0,"MunName":"Mun4"},
                        {"id":1,"MunName":"Mun5"},
                        {"id":2,"MunName":"Mun6"}
                    ]
                }
            ] 
        }
    ]
  },
  {
    "id":1,
    "CountryName":"India",
    "States":[  
        {  
           "id":0,
           "StateName":"Delhi",
           "Cities":[
                {  
                    "id":0,
                    "CityName":"Sonipat",
                    "Municipalities":[
                        {"id":0,"MunName":"Mun1"},
                        {"id":1,"MunName":"Mun2"},
                        {"id":2,"MunName":"Mun3"}
                    ]
                },
                {
                    "id":1,
                    "CityName":"Rohtak",
                    "Municipalities":[
                        {"id":0,"MunName":"Mun4"},
                        {"id":1,"MunName":"Mun5"},
                        {"id":2,"MunName":"Mun6"}
                    ]
                }
            ] 
        },
        {  
           "id":1,
           "StateName":"Karnataka",
           "Cities":[
                {
                    "id":0,
                    "CityName":"Mangalore",
                    "Municipalities":[
                        {"id":0,"MunName":"Mun1"},
                        {"id":1,"MunName":"Mun2"},
                        {"id":2,"MunName":"Mun3"}
                    ]
                },
                {
                    "id":1,
                    "CityName":"Hubli",
                    "Municipalities":[
                        {"id":0,"MunName":"Mun4"},
                        {"id":1,"MunName":"Mun5"},
                        {"id":2,"MunName":"Mun6"}
                    ]
                }
            ] 
        }
    ]
  }
]
}
4

2 回答 2

0

您可以根据您在第一个下拉菜单中所做的选择并根据您的选择遍历所选对象以进行下一个下拉菜单，不断更新您的 *ngFor in 选项。

对于反应式表单，首先在您的 .ts 中导入 formGroup 和 FormControl

ind = 0;  // index val of selected drop down
val = 0;

并创建 FormGroup 实例 

  myGroup = new FormGroup({
    CountryName: new FormControl(),
    states: new FormControl(),
    Cities: new FormControl(),
 });

并在您的 HTML 中

// data is your json data.

<form  [formGroup]="myGroup">
<select  formControlName="CountryName" (change)="ind = $event.target.value">
  <option *ngFor="let country of data.Countries" [value]="country.id">{{country.CountryName}}</option>
</select>
<select formControlName="states" (change)="val = $event.target.value">
  <option *ngFor="let state of data.Countries[ind].States" [value]="state.id">{{state.StateName}}
  </option>
</select> 
<select formControlName="Cities" (change)="cityVal = $event.target.value">
  <option *ngFor="let Cities of data.Countries[ind].States[val].Cities" 

[value]="Cities.id">{{Cities.CityName}}
      </option>

//......   and so on keep updating your options for all nested array ....
    </select> 

</form >
于 2018-10-19T09:27:28.543 回答
0

如果您共享更多代码片段，它将更加可视化。顺便说一句，您需要添加一个额外的密钥来告诉您所选选项。

例如 Country.states[0].cities[2].selected = true

在这里，您可以检索选定的键并跟踪其选定的值是否为真。

于 2018-10-19T07:19:24.953 回答