角度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的思考会因缩小而中断。查看MiškoHeverey对此事的回复。

我花了一些时间来创建同时支持一维和多维数组的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更新为新语法

Question 3

设计不支持它。sortBy管道可能会导致生产规模应用程序出现实际性能问题。这是Angular版本1的问题。

您不应创建自定义排序功能。相反，您应该首先在打字稿文件中对数组进行排序，然后再显示它。如果例如在选择下拉菜单时需要更新订单，则使该下拉菜单选择触发一个函数并从中调用您的排序函数。可以将此排序功能提取到服务，以便可以重新使用它。这样，仅在需要时才应用排序，并且您的应用程序性能会更好。

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文件夹中。

定单

//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'"如果要按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

您必须创建自己的Pipe进行数组排序，这是一个示例，您如何做到这一点。

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

  }

}