Angular 4 - 如何按字母顺序显示新创建的变量？答案

【问题标题】：Angular 4 - how to display newly created variables alphabetically?Angular 4 - 如何按字母顺序显示新创建的变量？
【发布时间】：2018-10-03 09:50:51
【问题描述】：

我必须按字母顺序显示我的所有报告。

<ul class="reports-list" style="list-style-type:none;">
  <ng-container *ngFor="let report of reports | sort">
    <li id="report-number-{{report.id}}"><div id="report-button-{{report.id}}" class="btn report-name-button border-bottom standard-color" (click)="chooseReport(report)">{{ report?.name | translate }} </div>
    </li> 
  </ng-container>
</ul>

我试图使用这个管道，但它没有按那个顺序显示：

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
name: "sort"
     })
 export class ArraySortPipe {
transform(array: Array<string>, args: string): Array<string> {
  array.sort((a: any, b: any) => {
    if (a < b) {
      return -1;
    } else if (a > b) {
      return 1;
    } else {
      return 0;
    }
  });
  return array;
}

}

有人可以帮帮我吗？问候。

【问题讨论】：

你能在这里发布你的虚拟 JSON 以供参考吗？
报告真的是一个字符串数组吗？因为你在你的模板中做“reports.id”我不这么认为

标签： angular sorting pipe

【解决方案1】：

您需要指定要根据它排序的属性，因为a,b 参数是对象

这样试试

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
name: "sort"
     })
 export class ArraySortPipe {
transform(array: Array<string>, args: string): Array<string> {
 return array.sort((a: any, b: any) => {
    if (a.name < b.name) {
      return -1;
    } else if (a.name > b.name) {
      return 1;
    } else {
      return 0;
    }
  });

}
}

stackblitz demo

【讨论】：

您的代码不符合逻辑，管道采用“字符串”数组，因此 a.name 无法正常工作
我没有工作。它稍微改变了顺序，但不是aphabetically
@Artamiel 你可以分享一个你的数据的 json 例子吗，你检查过演示吗？

【解决方案2】：

假设您有报告的“模型”（当然带有属性名称和 id），您的管道应该如下所示：

import { Pipe, PipeTransform } from "@angular/core";
import { Report } from 'myModels/report'

@Pipe({
    name: "sort"
})
export class ArraySortPipe {
transform(array: Array<Report>, args: string): Array<Report> {
  array.sort((a: Report, b: Report) => {
    if (a.name < b.name) {
      return -1;
    } else if (a.name  > b.name ) {
      return 1;
    } else {
      return 0;
    }
  });
  return array;
}
}

在您的代码中，您的管道采用了一个字符串数组，但在您的模板中，您使用“report.id”这不合逻辑。

如果您没有报告模型，只需将报告更改为 { id : number, name : string ...}

此外，根据数组大小，您的管道正在做一个巨大的特征，也许您应该让他“纯”以获得更好的性能。

@Pipe({
    name: "sort",
    pure : true
})

https://angular.io/guide/pipes#pure-pipes

【讨论】：