кутова 2 сортування та фільтрування

Question 1

В Angularjs 1 можна сортувати та фільтрувати таким чином:

<ul ng-repeat="friend in friends | filter:query | orderBy: 'name' ">
   <li>{{friend.name}}</li>
</ul>

Але я не міг знайти прикладів того, як це зробити в Angularjs 2.0. Моє питання полягає в тому, як сортувати та фільтрувати в Angularjs 2.0? Якщо він все ще не підтримується, хтось знає, коли і чи буде він доданий до Angularjs 2.0?

Question 2

Це не додається з коробки, оскільки команда 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

EDIT 2: оновлено ngFor до нового синтаксису

Question 3

Це не підтримується дизайном. Труба sortBy може спричинити реальні проблеми з продуктивністю програми масштабу виробництва. Це була проблема з кутовою версією 1.

Не слід створювати власну функцію сортування. Натомість вам слід відсортувати свій масив спочатку у файлі TypeScript, а потім відобразити його. Якщо замовлення потрібно оновити, коли, наприклад, вибрано спадне меню, нехай цей випадаючий вибір запускає функцію і викликає вашу функцію сортування, викликану з неї. Цю функцію сортування можна витягти в службу, щоб її можна було використовувати повторно. Таким чином, сортування застосовуватиметься лише тоді, коли це потрібно, і ефективність вашого додатку буде набагато кращою.

Question 4

Ось проста фільтрувальна труба для масиву об'єктів, що містять атрибути із рядковими значеннями (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>

Question 5

Конвеєр приймає дані як вхідні дані та перетворює їх на бажаний вихід. Додайте цей файл конвеєра: orderby.tsвсередині вашої /appпапки.

orderby.ts

//The pipe class implements the PipeTransform interface's 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's 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'"всередину вашого шаблону, якщо ви хочете сортувати статті за ідентифікатором у порядку зростання або orderby:'!id'"у порядку зменшення.

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

Ми повинні вказати нашу трубу в масиві труб декоратора @Component. 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 і цей пост на моєму веб-сайті

Question 6

Ви повинні створити власну трубу для сортування масивів, ось один приклад, як це можна зробити.

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

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

Question 7

Це мій сорт. Це зробить сортування за номерами, рядкове сортування та сортування за датою.

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;

  }

}