如何用angular中的姓氏对列表进行排序？

Question

我在角度2中创建了一个项目列表。我想使用custom fliter或使用pipe对该列表进行排序。我们可以使用lastname对列表进行排序。我试过这样的< / p>

<ul *ngFor="let user of userList | lastname" class="userlist">
  <li>
    <span>{{user.name}}</span>
    <span>{{user.lastname}}</span>
    <span>{{user.age}}</span>
  </li>
</ul>

但它给了我错误，所以还原 请建议一种方法来排序 https://stackblitz.com/edit/angular-fdxser?file=src%2Fapp%2Fapp.component.html

Answer 1

以下是管道的外观（来自您的链接）

<强> lastname.pipe.ts：

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

@Pipe({
  name: 'lastname'
})
export class LastnamePipe implements PipeTransform {

  transform(values: any[]): any[] {
    return values.sort((a, b) => a.lastname.localeCompare(b.lastname));
  }
}

如果你想要另一种方式arround将.reverse();添加到return语句或执行b.lastname.localeCompare(a.lastname)

Answer 2

在项目中添加以下排序管道。以下管道是通用的，您可以更改属性以进行排序。的 sort.pipe.ts

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

@Pipe({name: "sortBy"})
export class SortPipe implements PipeTransform {

    transform(array: Array<any>, args: any): Array<any> {
        console.log("arra", array, '-- args:', args);
        if (array !== undefined) {
            let keys, order;
            if(typeof args == 'string'){ // use default sort criteria
                keys = [args];
                order = 1;
            }

            if(keys.length > 0){
                array.sort((a: any, b: any) => {
                    if (a[keys[0]] < b[keys[0]]) {
                        return -1 * order;
                    } else if (a[keys[0]] > b[keys[0]]) {
                        return 1 * order;
                    } else {
                        return 0;
                    }
                });
            }
        }
        return array;
    }
}

在pipeModule中声明腐蚀管道，如： pipes.module.ts

import {NgModule} from '@angular/core';
import {SortPipe} from './sort.pipe';

@NgModule({
    imports: [],
    declarations: [SortPipe],
    exports: [SortPipe],
})

export class PipesModule {
    static forRoot() {
        return {
            ngModule: PipesModule,
            providers: [],
        };
    }
}

在app.module.ts中注入PipeModule。 HTML将是：

<ul *ngFor="let user of userList | sortBy :'lastname'" class="userlist">

Answer 3

您需要为此编写自定义管道。

查看Cory Shaw的答案 - angular-2-sort-and-filter