Блог

У меня есть выпадающее окно выбора кода телефонного префикса, которое заполняется из базы данных. В настоящее время у меня есть выпадающий список в алфавитном порядке, содержащий названия стран и телефонные коды, например. ВЕЛИКОБРИТАНИЯ ( 44) и т.д.

В идеале я хотел бы разместить 4 самых популярных страны (Великобритания, США, Франция, Испания) в верхней части списка (за ними следует полный список), однако я не уверен, как и где фильтровать этот список. Возможно использование тега optgroup и использование ngFor для перебора стран.

component.html

 <select
                class="block appearance-none text-gray-600 w-full"
                [(ngModel)]="value.code" name="code" (change)="modelChange($event)">
                    <option *ngFor="let country of countries" [value]="country.phoneCode">
                        {{ country.name   ' ( '   country.phoneCode   ')'}}
                    </option>

</select>
 

service.cs

 public IList<CountryViewModel> GetCountries()
        {
            using (var db = new ApplicationDbContext())
            {
                var countries = db.Countries.OrderBy(x => x.Name).ToList();
                return mapper.Map<List<Country>, List<CountryViewModel>>(countries);
            }
        }
 

В TypeScript вы можете сделать что-то вроде этого, чтобы отсортировать его

 Countries.sort((a, b)=>  ['UK', 'US', 'France', 'Spain'].includes(b.name))
 

Однако имейте в виду, что sort это не изменяет существующий массив, а просто возвращает новый отсортированный массив, который затем вы можете использовать в своем html для привязки к поле выбора