Die Implementierung eines asynchronen Sortierung Rohr in den Winkel-2

Ich versuche, erstellen Sie eine benutzerdefinierte Rohr im Winkel 2, die sortiert ein array von Objekten. Ich sammelte ein wenig Hilfe von dieser Beitrag. Aber ich kann nicht scheinen, um diese arbeiten.

Meine pipe sieht so 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;
  }
}

Den Einsatz des Rohr würde dann so Aussehen:

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

Es ist wie der Blick wird nie benachrichtigt, dass das Versprechen aufgelöst hat und die Daten zurückgegeben wurde.

Was bin ich?

  • Kannst du bitte erstellen Sie einen quick-bin-so das snippet kann gespielt werden um.
InformationsquelleAutor RHarris | 2016-03-10
  1. 13

    Den eingebauten async Rohr spritzt eine ChangeDetectorRef und fordert markForCheck() auf, wenn das Versprechen aufgelöst wird. Tun es alle in einer pipe, die Sie befolgen sollten, dass Beispiel. Sie können das Typoskript Quelle für das hier.

    Ich würde vorschlagen, jedoch, zu vergessen, über den Umgang mit async auf Ihre eigenen, und statt zu schreiben, ein reines stateless Sortierung Rohr und Kette es mit dem eingebauten async Rohr. Für die, die Sie schreiben würde, die Pfeife zu behandeln bare Array, nicht ein Versprechen, und verwenden Sie es wie diese:

    <div *ngFor="#c of countries | async | orderBy">{{c.name}}</div>
    • Ich hatte ursprünglich versucht, dies; ich aber lief in Probleme-ich denke, weil meine Leitung aufgerufen wurde, bevor das Versprechen gelöst, so meine array.sort warf einen Fehler. Vielleicht brauche ich nur den Griff ein leeres array zu beginnen, mit zu berücksichtigen, für die Verzögerung bei der gelöst-array. Ich gebe, dass ein Schuss.
    • Die async Rohr gibt null zurück, bevor das Versprechen aufgelöst wird, so dass Sie Ihre Pfeife muss um null ohne Fehler für die Verkettung zu arbeiten.
    • Vielen Dank für die nullTipp.. ich bemerkt, dass dieses Verhalten, aber ich dachte, dass ich di einen Fehler und so habe null.. Aber natürlich ist es das gewünschte Verhalten für eine noch nicht behoben, Versprechen 😉
    • Der link funktioniert nicht mehr. Sie haben die aktuellen Quellen?
    • Eine schnelle Suche auf github gefunden. Link aktualisiert.
    • Tolle Sachen thx!!! Ich bin immer noch Probleme auf das Verständnis, wie verwenden Sie dieses Muster, wenn ich brauche, um Daten zu laden, in meinem eigenen Rohr selbst. Also für mich ist in diesem Beispiel countries ist ein normales array und ich habe meine eigene Pipe loadAsyncData. Das gibt ein Versprechen oder eine Zeichenfolge (je nach dem ob zusätzliche Daten geladen werden müssen; zum Beispiel: zusätzliche Daten werden nur geladen, wenn das Land ist "Schweiz". Sonst haben wir nur Anzeige der Namen). In diesem Fall würde die syntax würde sein: countries | loadAsyncData | async | orderBy?
    • Für diese Art von design Sie werden brauchen, to schreiben Sie Ihre loadAsyncData Rohr immer wieder ein Versprechen. Wenn keine zusätzlichen Daten geladen werden muss, können Sie die Rückgabe eines bereits abgeschlossenen Versprechen, aber es ist immer ein Versprechen, weil das ist, was die async pipe-handles. Nach dieser Veränderung, Ihre syntax wäre richtig.

    InformationsquelleAutor Douglas
  2. 1

    Einfach wieder ein BehaviorSubject aus dem Rohr, die dann erhalten, gebunden mit angular-async-Leitung.

    Kleines Beispiel (legen Sie es in Ihre transform-Methode des Rohr -) die sollte man 'value' 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;
  }
}
    • Hey, Mann, können Sie nicht fügen Sie einige code, den Kontext. Es gibt keine Informationen über FormsReflector trotz könnte ich Schätze seine Funktionalität. Für Ihre inspiration, +1.
    • Ja, also was wichtig ist, sollten Sie Sie wieder ein BehaviorSubject aus dem Rohr. So können Sie füllen Sie dann den Wert, jederzeit, und es wird reflektiert: const sub = new BehaviorSubject(null); setTimeout(() => { sub.weiter('Wert'); }, 3000); return sub; Dies ist die kurze version von dem, was Sie brauchen. Die Rohre sind, drücken Ihre Werte aus miteinander. Die BehaviorSubject kann dann an asyn-Rohr eckig.
    InformationsquelleAutor Michael Baarz
Schreibe einen Kommentar