按字母顺序排列下拉菜单答案

【问题标题】：Ordering a drop down alphabetically angular按字母顺序排列下拉菜单
【发布时间】：2020-03-03 09:52:22
【问题描述】：

            <div class="form-group" *jhiHasAnyAuthority="['ROLE_ADMIN']">
                <label class="form-control-label" jhiTranslate="ManagementApp.project.lab" for="field_leader">Add Lab</label>
                <select class="form-control" id="field_lab" name="lab">
                    <option [ngValue]="null"></option>
                    <option *ngFor="let lab of labs;" (click)="addLab(lab)">{{lab.labCode}}</option>
                </select>
            </div>

我正在维护一些零经验的角度代码。

我正在尝试创建一个按字母顺序排序的下拉菜单。我试图模仿这个 load drop down values alphabetic order angular 6 ，但没有成功。

我试过"let lab of labs| orderBy: 'lab.labCode';"

"let lab of labs.sort();" as labs 已经有了排序功能。

排序函数原型为sort(compareFn?: (a: T, b: T) => number): this;，带有：

对数组进行排序。 * @param compareFn 用于确定元素顺序的函数名称。如果省略，则元素按升序，ASCII 字符顺序。

如您所见，实验室有一个labCode（字符串），需要用于排序。

任何帮助将不胜感激。

----编辑--------- labs 数组的内容：

【问题讨论】：

为什么不在 OnInit() 中订购 labs 数组？
因为我的想法是，“找到发生这种情况的位置，然后修改它以做我想做的事”，我猜。我提醒你，我在这方面的经验是 0。你能详细说明一下吗？
能否显示labs数组的内容
请检查编辑部分。我希望这就是你的意思。

标签： angular sorting

【解决方案1】：

下面的代码可以添加到组件的ngOnInit()或者你的API调用成功中按字母顺序排序

labs.sort((a, b) => a.labCode.localeCompare(b.labCode));

希望这会有所帮助。

【讨论】：

【解决方案2】：

在更高版本的 Angular 中没有 örderBy 管道。您必须编写示例中给出的管道 - https://medium.com/@mohammad.nicoll/sort-pipe-in-angular-6-7-f22475cc4054 并应用相同的内容。

【讨论】：

【解决方案3】：

您可以在ngOnInit()中对数组进行排序

 sorted : []
 ngOnInit(): void {

    this.sorted = labs.sort((a, b) => a.labCode> b.labCode? 1 : -1);
  }

在您的 html 中使用排序的实验室

【讨论】：