时间戳

首页 > 解决方案 > Angular中的排序下拉列表不区分大小写

html - Angular中的排序下拉列表不区分大小写

问题描述

尝试对 Angular Typescript 中的下拉值进行排序时遇到问题。我正在尝试按人员名称排序：

<div class="row">
            <div class="form-group col-md-2">
                <strong><label class="form-control-label" jhiTranslate="staff.staffReportingOfficer" for="field_staffReportingOfficer">Staff Reporting Officer</label></strong>
            </div>
            <div class="form-group col-md-4">
                <select class="form-control" id="field_staffReportingOfficer" name="staffReportingOfficer" [(ngModel)]="staff.staffReportingOfficer" (change)="roDropdownOnChange()">
                    <option [ngValue]='' disabled>Please select an Option</option>
                    <option [ngValue]="reportingOfficerOption.id === staff.reportingOfficer?.id ? staff.reportingOfficer.staffName : reportingOfficerOption.staffName" *ngFor="let reportingOfficerOption of reportingOfficers | orderBy: 'staffName'">{{reportingOfficerOption.staffName}}</option>
                </select>
            </div>
        </div>

我的人员数组包含 A、B、C、D、E、aaaa 等数据。然后它显示与上面完全相同的序列。

我想要的输出将是 A、aaaa、B、C、D、E。有什么想法吗？

标签： htmlangulartypescript

解决方案

Angular 不再有 OrderBy 管道。您可以参考this了解更多详情。

您将需要手动对reportingOfficers数组进行排序。它似乎是一个对象数组？

要执行不区分大小写的排序，我们需要通过将staffName值转换为小写来提供自定义排序功能。

reportingOfficers.sort((a, b) => a['staffName'].toLowerCase().localeCompare(b['staffName'].toLowerCase()));
console.log(reportingOfficers);

这就是使用 vanilla JavaScript/TypeScript 的方式（不依赖于其他库，例如 Lodash）。

推荐阅读