Angular orderBy pipe

Question

我想按属性名称排序我的结果，但以下给了我一个错误：

*ngFor="let s of rslt| order by:wind_park">

我从后端得到的：

data = [
  { turbine_name: "Baynne ", wind_park: "Bayone" },
  { turbine_name: "Salstiegl ", wind_park: "Salzst" },
  { turbine_name: "Chradurga - SLL2", wind_park: "Chiarga" },
  { turbine_name: "Moilishte ", wind_park: "Mogihte" },
  { turbine_name: "Mogshte ", wind_park: "Mogshte" }
]

我如何订购它以及最佳做法是什么？谢谢大家。

Answer 1

你需要创建你自己的 OrderBy 管道来满足你的需求，lodash是一个很酷的库，它有一堆现成的函数可以做到这一点orderBy。

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

@Pipe({
 name: "orderBy"
})
export class OrderByPipe implements PipeTransform {
 transform(array: any, sortBy: string, order?: string): any[] {
 const sortOrder = order ? order : 'asc'; // setting default ascending order

  return orderBy(array, [sortBy], [sortOrder]);
  }
}

在模板中的使用

<div *ngFor="let w of data | orderBy: 'wind_park'">{{ w.wind_park}}</div> //default will sort ascending

用于下降通过管道中的 desc

<div *ngFor="let w of data | orderBy: 'wind_park': 'desc'">{{ w.wind_park}}</div>

确保在模块中声明管道

@NgModule({
  imports:  [ BrowserModule, FormsModule ],
  declarations: [ OrderByPipe ], // declare pipe here
  bootstrap:    [ AppComponent ]
 })

工作演示