Angular 2 OrderByパイプ
このコードをangualr1からangular2に変換することはできません。
ng-repeat="todo in todos | orderBy: 'completed'"
これは私がThierry Templierの答えに従って行ったことです。
hTMLテンプレート：
*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;
}
}
私は間違いが@Pipeにあることを確信しています。最初のtodo.completed = false、それからtodo.complete = true。
正直なところ、transformメソッド、およびそのメソッドとsortメソッドで引数を渡す方法があまりよくわかりませんでした。
同様に、args：string引数は何ですか？ aとb、彼らは何ですか？彼らはどこから来たの？
詳細については、 https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe をご覧ください。この引用は最も関連性があります。基本的に、積極的に縮小する必要がある大規模なアプリの場合、フィルタリングおよび並べ替えロジックはコンポーネント自体に移動する必要があります。
「私たちの中にはこれを積極的に縮小することを気にしない人もいます。それが私たちの選択です。しかし、Angular製品は他の誰かが積極的に縮小するのを妨げるべきではありません。したがって、Angularチームはin Angularは安全に縮小します。
Angularチームと多くの経験豊富なAngular開発者は、フィルタリングとソートのロジックをコンポーネント自体に移動することを強くお勧めします。コンポーネントは、filteredHeroesプロパティまたはsortHeroesプロパティを公開し、サポートロジックを実行するタイミングと頻度を制御できます。パイプに入れてアプリ全体で共有する機能はすべて、フィルタリング/ソートサービスで記述し、コンポーネントに注入できます。」
パイプが角度4でカスタムオブジェクトをソートできるように@Thierry Templierの応答を変更しました。
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: "sort"
})
export class ArraySortPipe implements PipeTransform {
transform(array: any, field: string): any[] {
if (!Array.isArray(array)) {
return;
}
array.sort((a: any, b: any) => {
if (a[field] < b[field]) {
return -1;
} else if (a[field] > b[field]) {
return 1;
} else {
return 0;
}
});
return array;
}
}
そしてそれを使う：
*ngFor="let myObj of myArr | sort:'fieldName'"
うまくいけば、これは誰かに役立ちます。
これに対してカスタムパイプを実装して、配列のsortメソッドを利用することができます。
import { Pipe } from "angular2/core";
@Pipe({
name: "sort"
})
export class ArraySortPipe {
transform(array: Array<string>, args: string): Array<string> {
array.sort((a: any, b: any) => {
if (a < b) {
return -1;
} else if (a > b) {
return 1;
} else {
return 0;
}
});
return array;
}
}
そして、次に説明するようにこのパイプを使ってください。コンポーネントのpipes属性にパイプを指定することを忘れないでください。
@Component({
(...)
template: `
<li *ngFor="list | sort"> (...) </li>
`,
pipes: [ ArraySortPipe ]
})
(...)
これは文字列値を持つ配列の簡単なサンプルですが、高度なソート処理を行うことができます（オブジェクト配列の場合はオブジェクト属性に基づいて、ソートパラメータに基づいて...）。
これはこれのためのplunkrです： https://plnkr.co/edit/WbzqDDOqN1oAhvqMkQRQ？p = preview 。
それがあなたに役立つことを願っています、ティエリー
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：昇順。
Angularは、箱から出してorderByフィルタは付属していませんが、必要な場合は簡単に作成できます。ただし、スピードと縮小化について注意が必要な点がいくつかあります。下記参照。
単純なパイプはこのようになります。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sort'
})
export class SortPipe implements PipeTransform {
transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
return ary.sort(fn)
}
}
このパイプはソート関数（fn）を受け入れ、それにプリミティブの配列を適切な方法でソートするデフォルト値を与えます。ご希望であれば、このソート機能をオーバーライドすることもできます。
属性名は縮小の対象となるため、属性名を文字列として受け入れることはできません。コードを縮小すると変更されますが、テンプレート文字列の値も縮小するのに十分なほどスマートではありません。
プリミティブのソート（数字と文字列）
これを使用して、デフォルトのコンパレータを使用して数値または文字列の配列をソートできます。
import { Component } from '@angular/core';
@Component({
selector: 'cat',
template: `
{{numbers | sort}}
{{strings | sort}}
`
})
export class CatComponent
numbers:Array<number> = [1,7,5,6]
stringsArray<string> = ['cats', 'hats', 'caveats']
}
オブジェクトの配列をソートする
オブジェクトの配列をソートしたい場合は、それに比較関数を与えることができます。
import { Component } from '@angular/core';
@Component({
selector: 'cat',
template: `
{{cats | sort:byName}}
`
})
export class CatComponent
cats:Array<Cat> = [
{name: "Missy"},
{name: "Squoodles"},
{name: "Madame Pompadomme"}
]
byName(a,b) {
return a.name > b.name ? 1 : -1
}
}
警告 - 純粋なパイプと不純なパイプ
Angular 2には、純粋で不純なパイプの概念があります。
純粋なパイプ オブジェクト識別を使用して変更検出を最適化します。つまり、新しいオブジェクトを配列に追加した場合など、入力オブジェクトがIDを変更した場合にのみパイプが実行されます。それは物に降下しません。つまり、this.cats[2].name = "Fluffy"などのネストした属性を変更しても、パイプは再実行されません。これはAngularを速くするのに役立ちます。 Angularパイプはデフォルトで純粋です。
不純なパイプ 一方、オブジェクトの属性をチェックします。これは潜在的にはるかに遅くなります。それはpipe関数が何をするのか保証できないので（おそらくそれは例えば一日の時間に基づいて異なってソートされます）、 不純なパイプは非同期イベントが起こるたびに走ります。 配列が大きい場合、これはあなたのアプリをかなり遅くします。
上のパイプは純粋です。これは、配列内のオブジェクトが不変の場合にのみ実行されることを意味します。猫を交換した場合は、猫オブジェクト全体を新しいものと交換する必要があります。
this.cats[2] = {name:"Tomy"}
Pure属性を設定することで上記を不純なパイプに変更することができます。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sort',
pure: false
})
export class SortPipe implements PipeTransform {
transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
return ary.sort(fn)
}
}
このパイプはオブジェクトに降りますが、遅くなります。慎重に使用してください。
私はあなたが必要とするものだけを実行する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
これはあなたがそれに渡すどんなフィールドにもうまくいくでしょう。 （ 重要： アルファベット順に並べるだけなので、日付を渡すと日付順ではなくアルファベット順に並びます）
/*
* 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
});
}
}
}
角度付きの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'"
モジュールにPipeを追加することを忘れないでください
@NgModule({
...,
declarations: [OrderByPipe, ...],
...
})
これはAngularJs orderby pipe in 角度4 に代わる良い方法です。簡単で使いやすいです。
これはより多くの情報のためのgithub URLです https://github.com/VadimDez/ngx-order-pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'orderBy'
})
export class OrderPipe implements PipeTransform {
transform(value: any | any[], expression?: any, reverse?: boolean): any {
if (!value) {
return value;
}
const isArray = value instanceof Array;
if (isArray) {
return this.sortArray(value, expression, reverse);
}
if (typeof value === 'object') {
return this.transformObject(value, expression, reverse);
}
return value;
}
/**
* Sort array
*
* @param value
* @param expression
* @param reverse
* @returns {any[]}
*/
private sortArray(value: any[], expression?: any, reverse?: boolean): any[] {
const isDeepLink = expression && expression.indexOf('.') !== -1;
if (isDeepLink) {
expression = OrderPipe.parseExpression(expression);
}
let array: any[] = value.sort((a: any, b: any): number => {
if (!expression) {
return a > b ? 1 : -1;
}
if (!isDeepLink) {
return a[expression] > b[expression] ? 1 : -1;
}
return OrderPipe.getValue(a, expression) > OrderPipe.getValue(b, expression) ? 1 : -1;
});
if (reverse) {
return array.reverse();
}
return array;
}
/**
* Transform Object
*
* @param value
* @param expression
* @param reverse
* @returns {any[]}
*/
private transformObject(value: any | any[], expression?: any, reverse?: boolean): any {
let parsedExpression = OrderPipe.parseExpression(expression);
let lastPredicate = parsedExpression.pop();
let oldValue = OrderPipe.getValue(value, parsedExpression);
if (!(oldValue instanceof Array)) {
parsedExpression.Push(lastPredicate);
lastPredicate = null;
oldValue = OrderPipe.getValue(value, parsedExpression);
}
if (!oldValue) {
return value;
}
const newValue = this.transform(oldValue, lastPredicate, reverse);
OrderPipe.setValue(value, newValue, parsedExpression);
return value;
}
/**
* Parse expression, split into items
* @param expression
* @returns {string[]}
*/
private static parseExpression(expression: string): string[] {
expression = expression.replace(/\[(\w+)\]/g, '.$1');
expression = expression.replace(/^\./, '');
return expression.split('.');
}
/**
* Get value by expression
*
* @param object
* @param expression
* @returns {any}
*/
private static getValue(object: any, expression: string[]) {
for (let i = 0, n = expression.length; i < n; ++i) {
const k = expression[i];
if (!(k in object)) {
return;
}
object = object[k];
}
return object;
}
/**
* Set value by expression
*
* @param object
* @param value
* @param expression
*/
private static setValue(object: any, value: any, expression: string[]) {
let i;
for (i = 0; i < expression.length - 1; i++) {
object = object[expression[i]];
}
object[expression[i]] = value;
}
}
Filterとorder byがANGULAR 2から削除され、独自に記述する必要があることがわかっているので、 plunker および / - 詳細な記事 の良い例です。
それはorderbyと同様にフィルタも使用しました、これは注文パイプのためのコードです
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'orderBy' })
export class OrderrByPipe implements PipeTransform {
transform(records: Array<any>, args?: any): any {
return records.sort(function(a, b){
if(a[args.property] < b[args.property]){
return -1 * args.direction;
}
else if( a[args.property] > b[args.property]){
return 1 * args.direction;
}
else{
return 0;
}
});
};
}
Package.jsonに、（このバージョンはAngular 2に適しています）のようなものを追加します。
"ngx-order-pipe": "^1.1.3",
TypeScriptモジュールで（そして配列をインポートします）：
import { OrderModule } from 'ngx-order-pipe';
これをオブジェクトに使うことができます。
@Pipe({
name: 'sort',
})
export class SortPipe implements PipeTransform {
transform(array: any[], field: string): any[] {
return array.sort((a, b) => a[field].toLowerCase() !== b[field].toLowerCase() ? a[field].toLowerCase() < b[field].toLowerCase() ? -1 : 1 : 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>
orderby Pipe inAngular JSはサポートしますが、Angular（上位バージョン）はサポートしません。廃止されたパフォーマンス速度を上げるために議論された彼の詳細を見つけてください。
https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
Angular 2の現在のバージョンでは、orderByおよびArraySortパイプはサポートされていません。これにはいくつかのカスタムパイプを書く/使う必要があります。