Question

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

<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;
}

}

有人可以帮我吗？问候。

Answer 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

Answer 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：数字，名称：字符串...}更改报告

此外，根据阵列大小，您的管道正在表现出巨大的特征，也许您应该使他“纯净”以获得更好的性能。

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

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

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

2 个答案: