如何在垫选择选项上应用搜索

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

希望对您有所帮助：ngx mat选择搜索

<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

Answer 2

我建议您改用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>

自动完成文档： https ： //material.angular.io/components/autocomplete