Как взять соответствующие значения раскрывающегося списка в Angular Material?

Question

Я пытаюсь реализовать каскадные выпадающие в угловых, используя угловой материал.
Но я не могу принять соответствующие значения.
Может ли кто-нибудь помочь мне с этим?

<mat-form-field>
      <mat-select [formControl]="country" placeholder="select" 
      #singleSelect>
        <mat-option *ngFor="let country of countries.Countries"
        [value]="domain">
          {{country.CountryName}}
        </mat-option>
      </mat-select>
    </mat-form-field>
<mat-form-field>
      <mat-select [formControl]="state" 
      placeholder="select" #singleSelect>
        <mat-option *ngFor="let i=0;let state of countries.Countries" 
        [value]="domain">
          {{state.CountryName[i].states.stateName}}
        </mat-option>
      </mat-select>
    </mat-form-field>
<mat-form-field>
      <mat-select [formControl]="city" 
      placeholder="select" #singleSelect>
        <mat-option *ngFor="let i=0;let j=0;let city of countries.Countries" 
        [value]="domain">
          {{city.CountryName[i].states[j].CityName}}
        </mat-option>
      </mat-select>
    </mat-form-field>
<mat-form-field>
      <mat-select [formControl]="municipality"
      placeholder="select" #singleSelect>
        <mat-option 
        *ngFor="let i=0;let j=0;k=0;let 
         municipality of countries.Countries"
         [value]="domain">
          {{municipality.city.CountryName[i].states[j].Cities[k].MunName}}
        </mat-option>
      </mat-select>
    </mat-form-field>

[
   {
      "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"
                           }
                        ]
                     }
                  ]
               }
            ]
         }
      ]
   }
]

Answer 1

Я бы реализовал решение, в котором большая часть логики находится в компоненте, а не в шаблоне, поскольку это очень трудно понять со всеми различными переменными цикла.

Подход, который я показываю вам в этом стековозе, здесь - это тот, который подписывается на свойство valueChanges FormControl и затем на основе выбранного значения фильтрует значения для следующего FormControl, например mat-select.

Раскрывающиеся списки отображаются в зависимости от отображаемых значений. Это означает, что они не будут отображаться, если отфильтрованные значения недоступны, и, таким образом, отображается один выпадающий список за другим.

Возможно, это не лучший или самый чистый способ реализации этого, но он определенно выполняет свою работу.

Примечание: я удалил окружающий [] из вашего countries объекта. Они не нужны.

Ключевые пункты из шаблона: Используйте *ngIf для условного отображения входных данных штата, города и муниципалитета (на основе предварительно отфильтрованных значений, см. Код компонента).

<mat-form-field>
    <mat-select [formControl]="country" placeholder="Select Country" #countrySelect>
        <mat-option *ngFor="let country of countries.Countries" [value]="country.CountryName">
            {{country.CountryName}}
        </mat-option>
    </mat-select>
</mat-form-field>
<mat-form-field *ngIf="statesFiltered && statesFiltered.length">
    <mat-select [formControl]="state" placeholder="Select State" #stateSelect>
        <mat-option *ngFor="let state of statesFiltered" [value]="state.StateName">
            {{state.StateName}}
        </mat-option>
    </mat-select>
</mat-form-field>

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

this.country.valueChanges.subscribe(() => {
  this.statesFiltered = [];
  this.citiesFiltered = [];
  this.municipalitiesFiltered = [];
  this.changeDetectorRef.detectChanges();
  this.statesFiltered = this.countries.Countries.find(country => {
    return country.CountryName === this.country.value;
  }).States;
});