我正在尝试在 Angular 2 中创建一个自定义 Pipe,它将对对象数组进行排序。我得到了一些帮助这个帖子 https://stackoverflow.com/questions/34363161/angular-2-displaying-async-object-data-from-promise。但是,我似乎无法让这个工作。
我的管道看起来像这样:
@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>
就像视图永远不会收到承诺已解决且数据已返回的通知一样。
我缺少什么?
内置的async
管道注入一个ChangeDetectorRef
并打电话markForCheck()
当承诺解决时就可以了。要在一个管道中完成所有操作,您应该遵循该示例。您可以查看 Typescript 源代码here https://github.com/angular/angular/blob/master/packages/common/src/pipes/async_pipe.ts.
然而,我建议忘记自己处理异步,而是编写一个纯粹的无状态排序管道并将其与内置的链接起来async
管道。为此,您可以编写管道来处理裸露的Array
,不是一个承诺,并像这样使用它:
<div *ngFor="#c of countries | async | orderBy">{{c.name}}</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)