Javascript 如何在列表中按姓氏排序？

我在angular 2中列出了一个项目列表。我想使用

自定义传单

或

管道

对列表进行排序。我们可以使用

lastname

对列表进行排序吗？我这样做了

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

{{user.name}
{{user.lastname}
{{user.age}

但它给了我这样的错误 请建议一种分类方法

---

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

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

---

如果您希望它以另一种方式出现，请添加一个

.reverse（）返回语句或执行
b.lastname.localeCompare（a.lastname）
以下是管道的外观（从链接）

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

如果您希望它以另一种方式出现，请添加一个
.reverse（）
到返回语句，或者执行
b.lastname.localeCompare（a.lastname）
在项目中添加以下排序管道。以下管道是通用管道，您也可以将属性更改为sort，例如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;
    }
}

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中注入管道模块。而HTML将是：

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


在项目中添加以下排序管道。以下管道是通用管道，您也可以将属性更改为sort，例如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;
    }
}

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中注入管道模块。而HTML将是：

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


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

从Cory Shaw查看这个答案-
您需要为此编写一个自定义管道

查看Cory Shaw的答案-
您必须在管道中的转换方法中添加逻辑来对数组进行排序。您必须在管道中的转换方法中添加逻辑来对数组进行排序。