angular - 模板Angular2中的过滤器数组

Question

我正在尝试制作简单的模板，但遇到了一些小问题。我想在我的待办事项列表中打印未完成任务的数量，但无法在模板中过滤它们。我有这个:

<span class="todo-count"><strong>{{todos.length}}</strong> left</span>

但我想过滤此待办事项以仅计算状态已完成设置为 false 的待办事项:

<span class="todo-count"><strong>{{todos.filter(t => !t.complete).length}}</strong> left</span>

但这行不通。我怎样才能做到这一点？

Answer 1

最正确的方法是使用 Angular 管道:

模板

<span class="todo-count"><strong>{{ (todos | filter : filterFunction).length }}</strong> left</span>

管道

import {
    Injector,
    Pipe,
    PipeTransform
} from '@angular/core';
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

    public constructor(private readonly injector: Injector) {
    }

    transform(value: Array<any>, callback: any): any {
        return value.filter(callback);
    }
}

组件 Controller 中的filterFunction

filterFunction(t): boolean {
  return !t.complete;
}

你可以在这里看到为什么不在 Angular 模板中使用方法 Don't Use Functions Inside Angular Templates and What to Use Instead .简而言之，这是因为 Angular 中的变更检测机制。在运行函数函数之前，Angular 无法检测函数的结果是否已更改。

需要考虑的是，即使我们有相同的输入数据，函数也会运行