Angular 2 сортировка и фильтр

Ответ 1

Это не добавлено из коробки, потому что команда Angular хочет, чтобы Angular 2 работал минифицированно. OrderBy бежит от размышлений, которые ломаются с минификацией. Проверьте Мишко Хеверей ответ на этот вопрос.

Я потратил время на создание канала OrderBy, который поддерживает как одномерные, так и многомерные массивы. Он также поддерживает возможность сортировки по нескольким столбцам многомерного массива.

<li *ngFor="let person of people | orderBy : ['-lastName', 'age']">{{person.firstName}} {{person.lastName}}, {{person.age}}</li>

Этот канал позволяет добавлять больше элементов в массив после рендеринга страницы и по-прежнему правильно сортировать массивы с новыми элементами.

У меня есть описание процесса здесь.

И вот рабочая демонстрация: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby и https://plnkr.co/edit/DHLVc0?p=info

РЕДАКТИРОВАТЬ: Добавлена новая демо-версия для http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby

РЕДАКТИРОВАТЬ 2: Обновлен ngFor для нового синтаксиса

Ответ 2

Вот простой фильтр для массива объектов, содержащих атрибуты со строковыми значениями (ES6)

filter-array-pipe.js

import {Pipe} from 'angular2/core';

// # Filter Array of Objects
@Pipe({ name: 'filter' })
export class FilterArrayPipe {
  transform(value, args) {
    if (!args[0]) {
      return value;
    } else if (value) {
      return value.filter(item => {
        for (let key in item) {
          if ((typeof item[key] === 'string' || item[key] instanceof String) && 
              (item[key].indexOf(args[0]) !== -1)) {
            return true;
          }
        }
      });
    }
  }
}

Ваш компонент

myobjComponent.js

import {Component} from 'angular2/core';
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import {FilterArrayPipe} from 'filter-array-pipe';

@Component({
  templateUrl: 'myobj.list.html',
  providers: [HTTP_PROVIDERS],
  pipes: [FilterArrayPipe]
})
export class MyObjList {
  static get parameters() {
    return [[Http]];
  }
  constructor(_http) {
    _http.get('/api/myobj')
      .map(res => res.json())
      .subscribe(
        data => this.myobjs = data,
        err => this.logError(err))
      );
  }
  resetQuery(){
    this.query = '';
  }
}

В вашем шаблоне

myobj.list.html

<input type="text" [(ngModel)]="query" placeholder="... filter" > 
<div (click)="resetQuery()"> <span class="icon-cross"></span> </div>
</div>
<ul><li *ngFor="#myobj of myobjs| filter:query">...<li></ul>

Ответ 3

Он не поддерживается дизайном. Трубка sortBy может вызвать проблемы с производительностью для приложения масштаба производства. Это проблема с angular версией 1.

Вам не следует создавать настраиваемую функцию сортировки. Вместо этого вы должны сначала отсортировать свой массив в файле typescript, а затем отобразить его. Если заказ нужно обновить, например, если выбрано выпадающее меню, выберите этот вариант выпадающего меню и вызовите функцию сортировки, вызванную из этого. Эта функция сортировки может быть извлечена в службу, чтобы ее можно было повторно использовать. Таким образом, сортировка будет применяться только тогда, когда это потребуется, и производительность вашего приложения будет намного лучше.

Ответ 4

Труба принимает данные как входные данные и преобразует их в желаемый результат. Добавьте этот файл: orderby.ts в папку /app.

orderby.ts

//The pipe class implements the PipeTransform interface transform method that accepts an input value and an optional array of parameters and returns the transformed value.

import { Pipe,PipeTransform } from "angular2/core";

//We tell Angular that this is a pipe by applying the @Pipe decorator which we import from the core Angular library.

@Pipe({

  //The @Pipe decorator takes an object with a name property whose value is the pipe name that we'll use within a template expression. It must be a valid JavaScript identifier. Our pipe name is orderby.

  name: "orderby"
})

export class OrderByPipe implements PipeTransform {
  transform(array:Array<any>, args?) {

    // Check if array exists, in this case array contains articles and args is an array that has 1 element : !id

    if(array) {

      // get the first element

      let orderByValue = args[0]
      let byVal = 1

      // check if exclamation point 

      if(orderByValue.charAt(0) == "!") {

        // reverse the array

        byVal = -1
        orderByValue = orderByValue.substring(1)
      }
      console.log("byVal",byVal);
      console.log("orderByValue",orderByValue);

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

В вашем файле компонента (app.component.ts) импортируйте только что добавленный канал: import {OrderByPipe} from './orderby';

Затем добавьте *ngFor="#article of articles | orderby:'id'" внутри вашего шаблона, если вы хотите сортировать свои статьи по id в порядке возрастания или orderby:'!id'" в порядке убывания.

Мы добавляем параметры в канал, следуя имени канала с двоеточием (:), а затем значение параметра

Мы должны перечислить нашу трубку в массиве pipe @Component decorator. pipes: [ OrderByPipe ].

app.component.ts

import {Component, OnInit} from 'angular2/core';
import {OrderByPipe} from './orderby';

@Component({
    selector: 'my-app',
    template: `
      <h2>orderby-pipe by N2B</h2>
      <p *ngFor="#article of articles | orderby:'id'">
        Article title : {{article.title}}
      </p>
    `,
    pipes: [ OrderByPipe ]

})
export class AppComponent{
    articles:Array<any>
    ngOnInit(){
        this.articles = [
        {
            id: 1,
            title: "title1"
        },{
            id: 2,
            title: "title2",
        }]  
    }

}

Больше информации здесь, на моем github и этот пост на моем сайте

Ответ 5

Вы должны создать свой собственный Pipe для сортировки массива, вот один пример, как вы можете это сделать.

<li *ngFor="#item of array | arraySort:'-date'">{{item.name}} {{item.date | date:'medium' }}</li>

https://plnkr.co/edit/DU6pxr?p=preview

Ответ 6

Это мой сорт. Он будет выполнять сортировку по номерам, сортировку строк и сортировку по дате.

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

@Pipe({
  name: 'sortPipe'
 })

export class SortPipe implements PipeTransform {

    transform(array: Array<string>, key: string): Array<string> {

        console.log("Entered in pipe*******  "+ key);


        if(key === undefined || key == '' ){
            return array;
        }

        var arr = key.split("-");
        var keyString = arr[0];   // string or column name to sort(name or age or date)
        var sortOrder = arr[1];   // asc or desc order
        var byVal = 1;


        array.sort((a: any, b: any) => {

            if(keyString === 'date' ){

                let left    = Number(new Date(a[keyString]));
                let right   = Number(new Date(b[keyString]));

                return (sortOrder === "asc") ? right - left : left - right;
            }
            else if(keyString === 'name'){

                if(a[keyString] < b[keyString]) {
                    return (sortOrder === "asc" ) ? -1*byVal : 1*byVal;
                } else if (a[keyString] > b[keyString]) {
                    return (sortOrder === "asc" ) ? 1*byVal : -1*byVal;
                } else {
                    return 0;
                }  
            }
            else if(keyString === 'age'){
                return (sortOrder === "asc") ? a[keyString] - b[keyString] : b[keyString] - a[keyString];
            }

        });

        return array;

  }

}