Implementieren einer asynchronen Sortierröhre in Angular 2

Question

Ich versuche, eine benutzerdefinierte Pipe in Angular 2 zu erstellen, die ein Array von Objekten sortiert. Ich habe ein wenig Hilfe von this post gesammelt. Jedoch kann ich nicht scheinen, dass das funktioniert.

Mein Rohr sieht wie folgt aus:

@Pipe({ 
    name: "orderByAsync", 
    pure: false 
}) 
export class AsyncArrayOrderByPipe { 
    private _promise : Promise<Array<Object>>; 
    private _output: Array<Object>; 

    transform(promise: Promise<Array<Object>>, args: any): Array<Object>{ 
    var _property : string = ""; 
    var _descending : boolean = false; 

    this._property = args[0]["property"] || ""; 
    this._descending = args[0]["descending"] || false; 

    if(!this._promise) { 
     this._promise = promise.then((result) => { 
     result.sort((a: any, b: any) => { 
      if (a[this._property] < b[this._property]) return (this._descending ? 1: -1); 
      else if (a[this._property] > b[this._property]) return (this._descending ? -1: 1); 
      else return 0; 
     }); 

     this._output = result; 
     }); 
    } 

    return this._output; 
    } 
} 

Die Verwendung des Rohres würde wie folgt aussehen:

<div *ngFor="#c of countries | orderByAsync">{{c.name}}</div> 

Es ist wie der Blick nie mitgeteilt wird, dass das Versprechen gelöst hat und Daten haben ist zurückgekommen.

Was fehlt mir?

Answer 1

Das eingebaute async Rohr injiziert ein ChangeDetectorRef und ruft markForCheck() darauf auf, wenn das Versprechen verrechnet wird. Um alles in einer Pipe zu machen, sollten Sie diesem Beispiel folgen. Sie können die Typescript-Quelle für das here anzeigen.

Ich würde jedoch vorschlagen, über asynchronen Umgang allein zu vergessen und stattdessen eine reine staatslose Sortierrohr und schreiben Sie es mit der eingebauten async Rohr. Dafür würde schreiben Sie Ihre Pfeife mit einem nackten Array, kein Versprechen, und verwenden Sie es wie folgt zu behandeln:

<div *ngFor="#c of countries | async | orderBy">{{c.name}}</div> 

Answer 2

kann einfach ein BehaviorSubject aus Ihrem Rohr, das dann mit Winkel async Rohr gebunden bekommen kann.

Kleines Beispiel (setzen Sie es in Ihrem Transformationsmethode Ihrer Pfeife), die Sie sollten geben ‚Wert‘ nach 3 Sekunden:

const sub = new BehaviorSubject(null); 
setTimeout(() => { sub.next('value'); }, 3000); 
return sub; 

Komplettes Beispiel:

import { IOption } from 'somewhere'; 
import { FormsReflector } from './../forms.reflector'; 
import { BehaviorSubject } from 'rxjs'; 
import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ name: 'getOptions' }) 
export class GetOptionsPipe implements PipeTransform { 

    public transform(value, ...args: any[]) { 
    const _subject = new BehaviorSubject('-'); 
    if (args.length !== 2) { 
     throw `getOptions pipe needs 2 arguments, use it like this: {{ 2 | getOptions:contract:'contractType' | async }}`; 
    } 
    const model = args[0]; 
    if (typeof model !== 'object') { 
     throw `First argument on getOptions pipe needs to be the model, use it like this: {{ 2 | getOptions:contract:'contractType' | async }}`; 
    } 
    const propertyName = args[1]; 
    if (typeof propertyName !== 'string') { 
     throw `Second argument on getOptions pipe needs to be the property to look for, ` + 
     `use it like this: {{ 2 | getOptions:contract:'contractType' | async }}`; 
    } 
    const reflector = new FormsReflector(model); 
    reflector.resolveOption(propertyName, value) 
    .then((options: IOption) => { 
     _subject.next(options.label); 
    }) 
    .catch((err) => { 
     throw 'getOptions pipe fail: ' + err; 
    }); 
    return _subject; 
    } 
}