c# - 用选定的项目填充数据库中的下拉列表,然后按字母顺序填充其余项目
问题描述
我有一个电话前缀代码下拉选择框,它是从数据库中填充的。我目前有一个按字母顺序排列的下拉列表,其中包含国家名称和拨号代码,例如。英国(+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);
}
}
解决方案
在 TypeScript 中,您可以执行以下操作对其进行排序
Countries.sort((a, b)=> +['UK', 'US', 'France', 'Spain'].includes(b.name))
但是请注意,sort
它不会改变现有数组,它只会返回一个新的排序数组,然后您可以在 html 中使用它来绑定到选择框
推荐阅读
- angular - 在 Angular 8 应用程序中使用 HighCharts styledMode
- javascript - 显示更多/更少的角度值
- sql - 如何使用 SQL 在几天和几周内查找聚合值
- vba - 如何使用 VBA 搜索并突出显示一组“ChrW(n)”亚洲字体字符而不是将它们列出来
- react-native - Firebase 'signInWithEmailAndPassword' 和 'isNewUser'
- javascript - 如何使用 Firefox 中的扩展存储关闭后仍然存在的数据
- python-3.x - 使用 BeautifulSoup 在 python 中进行 Web 抓取 - 如何转置结果?
- spring-boot - 如何在 Spring Boot 中仅使用一个拦截器处理所有传入请求
- docker - 我收到错误“exec:\”/bin/bash\”:stat /bin/bash:没有这样的文件或目录”:未知
- angular - Angular Auth Guard 安全路由