107

このコードを Angular 1 から Angular 2 に変換できません:

ng-repeat="todo in todos | orderBy: 'completed'"

これは、ティエリー・テンプリエの答えに従って私がやったことです:

コンポーネント テンプレート:

*ngFor="#todo of todos | sort"

コンポーネントコード:

@Component({
    selector: 'my-app',
    templateUrl: "./app/todo-list.component.html",
    providers: [TodoService],
    pipes: [ TodosSortPipe ]

})

パイプコード:

import { Pipe } from "angular2/core";
import {Todo} from './todo';

@Pipe({
  name: "sort"
})
export class TodosSortPipe {
  transform(array: Array<Todo>, args: string): Array<Todo> {
    array.sort((a: any, b: any) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

Todoプロパティ によって並べ替えられた の配列をソートしようとしていますcompleted。最初todo.completed = falseにtodo.complete = true.

transformメソッドと、そのメソッドとメソッドで引数を渡す方法がよくわかりませんsort。

args: string議論は何ですか？それらは何aでb、どこから来たのですか？

4

18 に答える 18

76

完全な議論については、https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipeを参照してください。この引用は最も関連性があります。基本的に、積極的に縮小する必要がある大規模なアプリの場合、フィルタリングと並べ替えのロジックはコンポーネント自体に移動する必要があります。

「私たちの中には、これを積極的に縮小することを気にしない人もいるかもしれません。それが私たちの選択です。しかし、Angular 製品は、他の誰かが積極的に縮小することを妨げるべきではありません。したがって、Angular チームは、Angular で出荷されるすべてのものは安全に縮小すると判断しました。

Angular チームと多くの経験豊富な Angular 開発者は、フィルタリングと並べ替えのロジックをコンポーネント自体に移動することを強くお勧めします。コンポーネントは、filteredHeroes または sortedHeroes プロパティを公開し、サポート ロジックをいつ、どのくらいの頻度で実行するかを制御できます。パイプに入れてアプリ全体で共有する機能はすべて、フィルタリング/並べ替えサービスに記述して、コンポーネントに注入できます。」

于 2016-07-08T22:50:04.500 に答える
11

更新された OrderByPipe: 文字列を並べ替えない問題を修正しました。

OrderByPipe クラスを作成します。

import { Pipe, PipeTransform } from "@angular/core";
@Pipe( {
name: 'orderBy'
} )
export class OrderByPipe implements PipeTransform {
transform( array: Array<any>, orderField: string, orderType: boolean ): Array<string> {
    array.sort( ( a: any, b: any ) => {
        let ae = a[ orderField ];
        let be = b[ orderField ];
        if ( ae == undefined && be == undefined ) return 0;
        if ( ae == undefined && be != undefined ) return orderType ? 1 : -1;
        if ( ae != undefined && be == undefined ) return orderType ? -1 : 1;
        if ( ae == be ) return 0;
        return orderType ? (ae.toString().toLowerCase() > be.toString().toLowerCase() ? -1 : 1) : (be.toString().toLowerCase() > ae.toString().toLowerCase() ? -1 : 1);
    } );
    return array;
  }
}

あなたのコントローラーで：

@Component({
pipes: [OrderByPipe]
})

またはあなたの

 declarations: [OrderByPipe]

あなたのhtmlで：

<tr *ngFor="let obj of objects | orderBy : ObjFieldName: OrderByType">

ObjFieldName: 並べ替えたいオブジェクト フィールド名。

OrderByType: ブール値; true: 降順。false: 昇順。

于 2016-07-27T12:03:32.897 に答える
7

必要なことだけを行う OrderBy パイプを作成しました。列挙可能なオブジェクトの複数の列でソートできることもサポートしています。

<li *ngFor="#todo in todos | orderBy : ['completed']">{{todo.name}} {{todo.completed}}</li>

このパイプにより、ページのレンダリング後に配列に項目を追加することができ、動的に更新された配列を並べ替えることができます。

私はプロセスについてここに書いています。

そして、これが実際のデモです: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderbyとhttps://plnkr.co/edit/DHLVc0?p=info

于 2016-04-12T13:07:29.167 に答える
5

angularでlodashを使用することをお勧めします。次にパイプが続きます：

import {Pipe, PipeTransform} from '@angular/core';
import * as _ from 'lodash'
@Pipe({
    name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

    transform(array: Array<any>, args?: any): any {
        return _.sortBy(array, [args]);
    }

}

htmlのように使用します

*ngFor = "#todo of todos | orderBy:'completed'"

モジュールにパイプを追加することを忘れないでください

@NgModule({
    ...,
    declarations: [OrderByPipe, ...],
    ...
})
于 2017-03-14T09:00:10.887 に答える
4

これは、渡したどのフィールドでも機能します。(重要:アルファベット順にのみ並べられるため、日付を渡すと、日付ではなくアルファベット順に並べられます)

/*
 *      Example use
 *      Basic Array of single type: *ngFor="let todo of todoService.todos | orderBy : '-'"
 *      Multidimensional Array Sort on single column: *ngFor="let todo of todoService.todos | orderBy : ['-status']"
 *      Multidimensional Array Sort on multiple columns: *ngFor="let todo of todoService.todos | orderBy : ['status', '-title']"
 */

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

@Pipe({name: "orderBy", pure: false})
export class OrderByPipe implements PipeTransform {

    value: string[] = [];

    static _orderByComparator(a: any, b: any): number {

        if (a === null || typeof a === "undefined") { a = 0; }
        if (b === null || typeof b === "undefined") { b = 0; }

        if (
            (isNaN(parseFloat(a)) ||
            !isFinite(a)) ||
            (isNaN(parseFloat(b)) || !isFinite(b))
        ) {
            // Isn"t a number so lowercase the string to properly compare
            a = a.toString();
            b = b.toString();
            if (a.toLowerCase() < b.toLowerCase()) { return -1; }
            if (a.toLowerCase() > b.toLowerCase()) { return 1; }
        } else {
            // Parse strings as numbers to compare properly
            if (parseFloat(a) < parseFloat(b)) { return -1; }
            if (parseFloat(a) > parseFloat(b)) { return 1; }
        }

        return 0; // equal each other
    }

    public transform(input: any, config = "+"): any {
        if (!input) { return input; }

        // make a copy of the input"s reference
        this.value = [...input];
        let value = this.value;
        if (!Array.isArray(value)) { return value; }

        if (!Array.isArray(config) || (Array.isArray(config) && config.length === 1)) {
            let propertyToCheck: string = !Array.isArray(config) ? config : config[0];
            let desc = propertyToCheck.substr(0, 1) === "-";

            // Basic array
            if (!propertyToCheck || propertyToCheck === "-" || propertyToCheck === "+") {
                return !desc ? value.sort() : value.sort().reverse();
            } else {
                let property: string = propertyToCheck.substr(0, 1) === "+" || propertyToCheck.substr(0, 1) === "-"
                    ? propertyToCheck.substr(1)
                    : propertyToCheck;

                return value.sort(function(a: any, b: any) {
                    let aValue = a[property];
                    let bValue = b[property];

                    let propertySplit = property.split(".");

                    if (typeof aValue === "undefined" && typeof bValue === "undefined" && propertySplit.length > 1) {
                        aValue = a;
                        bValue = b;
                        for (let j = 0; j < propertySplit.length; j++) {
                            aValue = aValue[propertySplit[j]];
                            bValue = bValue[propertySplit[j]];
                        }
                    }

                    return !desc
                        ? OrderByPipe._orderByComparator(aValue, bValue)
                        : -OrderByPipe._orderByComparator(aValue, bValue);
                });
            }
        } else {
            // Loop over property of the array in order and sort
            return value.sort(function(a: any, b: any) {
                for (let i = 0; i < config.length; i++) {
                    let desc = config[i].substr(0, 1) === "-";
                    let property = config[i].substr(0, 1) === "+" || config[i].substr(0, 1) === "-"
                        ? config[i].substr(1)
                        : config[i];

                    let aValue = a[property];
                    let bValue = b[property];

                    let propertySplit = property.split(".");

                    if (typeof aValue === "undefined" && typeof bValue === "undefined" && propertySplit.length > 1) {
                        aValue = a;
                        bValue = b;
                        for (let j = 0; j < propertySplit.length; j++) {
                            aValue = aValue[propertySplit[j]];
                            bValue = bValue[propertySplit[j]];
                        }
                    }

                    let comparison = !desc
                        ? OrderByPipe._orderByComparator(aValue, bValue)
                        : -OrderByPipe._orderByComparator(aValue, bValue);

                    // Don"t return 0 yet in case of needing to sort by next property
                    if (comparison !== 0) { return comparison; }
                }

                return 0; // equal each other
            });
        }
    }
}
于 2016-09-22T23:38:57.873 に答える
0

Angular2 の現在のバージョンでは、orderBy および ArraySort パイプはサポートされていません。これには、いくつかのカスタムパイプを作成/使用する必要があります。

于 2016-02-02T16:41:11.680 に答える
0

Angular 5 以降のバージョンでは、 ngx-order-pipe パッケージを使用できます

ソース チュートリアル リンク

パッケージをインストールする

$ npm install ngx-order-pipe --save

アプリモジュールにインポート

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { OrderModule } from 'ngx-order-pipe';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    OrderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

どこでも使える

  <ul>
    <li *ngFor="let item of (dummyData | orderBy:'name') ">
      {{item.name}}
    </li>
  </ul>
于 2018-12-27T11:18:01.370 に答える