從數據庫中填充下拉列表，然后按字母順序填充 rest

Question

我有一個電話前綴代碼下拉框 select 框，它是從數據庫中填充的。 我目前有一個按字母順序排列的下拉列表，其中包含國家名稱和撥號代碼，例如。 英國（+44）等

理想情況下，我想將最受歡迎的 4 個國家/地區（英國、美國、法國、西班牙）放在列表頂部（完整列表緊隨其后），但是我不確定如何以及在何處過濾此列表。 可能使用 optgroup 標記並使用 ngFor 遍歷國家/地區。

組件.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>

服務.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);
            }
        }

Answer 1

在 TypeScript 你可以做這樣的事情來排序

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

但是請注意， sort不會改變現有數組，它只會返回一個新的排序數組，然后您可以在 html 中使用它來綁定到 select 框