使用角度 4 根据先前的选择自动填充下拉列表答案

【问题标题】：Auto populate dropdown based on previous selection using angular 4使用角度 4 根据先前的选择自动填充下拉列表
【发布时间】：2019-03-24 00:02:57
【问题描述】：

我正在处理 Angular 4 反应式表单。这里我有一个带有一些输入字段的表单。基于一个字段数据，即将到来的字段数据将被更改。我需要根据之前的下拉列表显示国家和所有城市使用角度 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"}
                    ]
                }
            ] 
        }
    ]
  }
]
}

【问题讨论】：

嗨，如果您发布一些您尝试过的代码会很有趣；）

标签： angular angular-reactive-forms angular4-forms

【解决方案1】：

如果你分享更多的代码sn-ps，它会更形象化。顺便说一句，您需要添加一个额外的密钥来告诉您所选选项。

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

在这里您可以检索选择的键并跟踪它是否被选择的值是否为真。

【讨论】：

【解决方案2】：

您可以根据您在第一个下拉菜单中所做的选择并根据您的选择遍历所选对象以进行下一个下拉菜单，从而不断更新您的 *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 >

【讨论】：