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

发布时间：2020-12-17 09:16:22 所属栏目：安全来源：网络整理

导读：我正在尝试在Angular 2中创建一个自定义管道,它将对一组对象进行排序.我从 this post获得了一些帮助.然而,我似乎无法让这个工作. 我的烟斗看起来像这样： @Pipe({ name: "orderByAsync",pure: false})export class AsyncArrayOrderByPipe { private _promise

我正在尝试在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>

就像视图永远不会被通知承诺已经解决并且数据已被返回.

我错过了什么？

当promise解析时,内置的异步管道注入一个ChangeDetectorRef并在其上调用markForCheck().要在一个管道中完成所有操作,您应该遵循该示例.您可以查看该 here的Typescript源.

但是,我建议忘记自己处理异步,而是写一个纯无状态排序管道并用内置的异步管道链接它.为此,你可以编写你的管道来处理一个裸数组,而不是一个promise,并像这样使用它：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!