Question

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

<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。有什么想法吗？

Answer 1

您可以为此使用lodash

var arr = ['A', 'B', 'C', 'a', 'b']

console.log(_.sortBy(arr, function (val) {
	return val.toLowerCase();
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Answer 2

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

您将需要手动对reportingOfficers数组进行排序。看来这是一个对象数组？

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

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

这是使用原始JavaScript / TypeScript（不依赖于其他库，例如Lodash）完成的。

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

2 个答案: