как отсортировать список с фамилией в угловых?

Question

Я делаю список элементов в угловых 2. Я хочу отсортировать этот список, используя custom fliter или pipe. Можем ли мы отсортировать мой список по 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>

но это дает мне ошибку, так что, пожалуйста, предложите способ сортировки https://stackblitz.com/edit/angular-fdxser?file=src%2Fapp%2Fapp.component.html

Answer 1

Добавьте следующую трубу сортировки в ваш проект.Следующая труба является общей, вы можете изменить атрибут для сортировки, например, ex. 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, например: pipe.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: [],
        };
    }
}

Вставьте PipeModule в app.module.ts.И HTML будет:

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

Answer 2

Для этого вам нужно написать собственный канал.

Посмотрите этот ответ у Кори Шоу - angular-2-sort-and-filter

Answer 3

Вот как должна выглядеть труба (по вашей ссылке)

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)