как применить поиск по параметрам выбора мата

Question

Я пытался применить поиск к параметрам выбора матов.

<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>

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

Я бы предложил вам использовать mat-autocomplete вместо этого.Я не думаю, что это возможно для поиска с помощью mat-select.mat-option можно собрать в группы с помощью элемента mat-optgroup:

<mat-autocomplete #auto="matAutocomplete">
  <mat-optgroup *ngFor="let group of filteredGroups | async" [label]="group.name">
    <mat-option *ngFor="let option of group.options" [value]="option">
      {{option.name}}
    </mat-option>
  </mat-optgroup>
</mat-autocomplete>

Autocomplete doc: https://material.angular.io/components/autocomplete

Answer 2

Я надеюсь помочь вам в этом: ngx mat select search

<mat-form-field>
  <mat-select [formControl]="bankCtrl" placeholder="Bank" #singleSelect>
    <mat-option>
      <ngx-mat-select-search [formControl]="bankFilterCtrl"></ngx-mat-select-search>
    </mat-option>
    <mat-option *ngFor="let bank of filteredBanks | async" [value]="bank">
      {{bank.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

Пожалуйста, проверьте ссылки:

https://www.npmjs.com/package/ngx-mat-select-search

https://stackblitz.com/edit/mat-select-search