Question

我们有async管道来解析模板Observables表达式中的*ngFor。是否有管道可以解析/调用返回数组的函数。

例如，如果我们有这样的内容：

  <app-todo *ngFor="let todo of todosFunction | call"

然后，angular将使用调用管道将todosFunction解析为返回的待办事项数组。

用例

export enum VISIBILITY_FILTER {
  SHOW_COMPLETED = 'Completed',
  SHOW_ACTIVE = 'Active',
  SHOW_ALL = 'All'
}

export function VISIBILITY_FILTER_VALUES():string[] {
  return Object.keys(VISIBILITY_FILTER).map(k => VISIBILITY_FILTER[k]);
}

我希望能够简单地通过导入和使用VISIBILITY_FILTER_VALUES来遍历{{1}}（而无需将其声明为组件的属性）。这可能吗？

或者也许可以创建一个处理枚举FILTER_VALUES目录并从中创建数组的管道？

Answer 1

您可以轻松完成

<app-todo *ngFor="let todo of todosFunction()">并在您的todosFunction()文件中定义ts，它返回一个数组。

Answer 2

没有内置的，但是写一个很简单：

管道

@Pipe({
  name: 'call'
})
export class CallPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if(typeof value === 'function') {
      return value(args);
    }
  }

}

Component.ts

export class AppComponent  {
 data(times) {
    return [1, 2, 3].map(x => x*times);
  }
}

Component.html

<p *ngFor="let i of data | call: 3">{{i}}</p>

如果您想知道的话，这是built-in pipes的列表。

Answer 3

您可以像这样调用函数吗？，则无需其他管道执行相同操作。

 <app-todo *ngFor="let todo of todosFunction()">

但是，建议在组件内部准备数组并将其绑定到变量，而不是调用函数。

Answer 4

模板中的调用功能确实很糟糕，因为该功能将在每个变更检测周期执行。

另一方面，管道是纯管道（默认情况下），因此只有在更改输入参数时才会调用管道。

@Pipe({
  name: 'apply',
})
export class ApplyPipe implements PipeTransform {
  transform<T, U extends any[]>(fn: (...fnArgs: U) => T, ...args: U): T {
    return fn(...args);
  }
}

循环访问由导入函数返回的数组？

用例

4 个答案: