Автоматическое заполнение раскрывающегося списка на основе предыдущего выбора с использованием угловых 4 - PullRequest
Новая
       33

Автоматическое заполнение раскрывающегося списка на основе предыдущего выбора с использованием угловых 4

0 голосов
/ 19 октября 2018

Я работаю над 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"}
                    ]
                }
            ] 
        }
    ]
  }
]
}

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Вы можете постоянно обновлять параметры * ngFor в параметрах, выбранных вами в первом раскрывающемся списке, и в зависимости от того, как вы выбираете объект для следующего раскрывающегося списка.

Для Реактивной формы сначала импортируйте formGroup и FormControl в свой.ts 

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 >
0 голосов
/ 19 октября 2018

Будет более наглядно, если вы поделитесь большим количеством фрагментов кода.Кстати, вам нужно добавить дополнительный ключ, который сообщит вам о выбранной опции.

Например, Страна.штаты [0] .Городы [2] .selected = true

Здесь вы можете получитьвыбранный ключ и проследить, является ли выбранное значение истинным или нет.

...