Question

我正在尝试将ngFor中的orderBy管道与异步管道一起使用。但是它给出了以下错误：

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'orderBy' could not be found ("
          </div>
          <div
            *ngFor="let a of arr | async | orderBy: 'b': ng:///TestModule/TestComponent.html@95:34
Error: Template parse errors:
The pipe 'orderBy' could not be found ("
          </div>
          <div

arr返回observables，它在没有orderBy的情况下也可以正常工作，但是当我要使用orderBy时，它给出了错误：

<div *ngFor="let a of arr | async | orderBy: 'b'> </div>

Answer 1

与AngularJS不同，Angular 2+具有stopped support serveral build in pipe。

您必须定义一个自定义管道才能使用其中一个：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'yourPipeName'})
export class ExponentialStrengthPipe implements PipeTransform {
  // The pipe's transform method take first Argurment is the data using that 
  // pipe( which is data before the '|' mark in the template), the others 
  // parameter is optional

  // Your sort logic is in here
  transform(input: Array<any>, para1, para2) {
    return input.sort( (a,b) => a>b);
  }
}

然后，您应该在模块中声明新创建的管道，然后可以在模板中使用它，如下所示：

<div *ngFor="let a of arr | async | yourPipeName> </div>

Answer 2

我建议您不要通过自定义管道进行排序。 Angular之所以选择orderBy管道是有原因的，因为它通常在执行方面效率低下。无论如何，您都在使用可观察的流，所以为什么不像这样在您的组件中添加排序作为运算符呢？

this.arr = this.arr.pipe(map(arr => arr.sort((a,b) => a > b))); // really any sort logic you want

这保证仅在确实需要发生排序时，即在更改数组时才进行排序，即IE。然后，您无需使用任何管道，就可以将排序操作保留在它们真正所属的代码中。

与异步一起使用时，找不到管道“ orderBy”错误

2 个答案: