我试图将搜索应用于垫选择选项。
<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"
}
]
}
]
}
]
}
]
}
]
答案 0 :(得分：1)
我希望能帮助您：ngx mat select搜索
<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>
请检查此链接：
答案 1 :(得分：0)
我建议您改用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>