在 Angular 2 中实现异步排序管道

Question

我正在尝试在 Angular 2 中创建一个自定义管道，它将对一组对象进行排序。我从this post 获得了一些帮助。但是，我似乎无法正常工作。

我的管道是这样的：

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

管道的使用如下所示：

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

就像从未通知视图承诺已解决并且数据已返回。

我错过了什么？

Answer 1

内置的async 管道注入ChangeDetectorRef 并在promise 解决时调用markForCheck()。要在一个管道中完成所有操作，您应该遵循该示例。您可以查看该 here 的 Typescript 源代码。

但是，我建议忘记自己处理异步，而是编写一个纯无状态排序管道并将其与内置的 async 管道链接。为此，您将编写管道来处理裸露的Array，而不是承诺，并像这样使用它：

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

Answer 2

只需从管道中返回一个 BehaviorSubject，然后它就可以与角度异步管道绑定。

小例子（把它放在你管道的转换方法中）应该在 3 秒后给你“价值”：

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

完整示例：

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