模板 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

最正确的方法是使用角度管道：

模板

<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);
    }
}

过滤器组件控制器中的功能

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

您可以在此处查看为什么不在 Angular 模板中使用方法不要在 Angular 模板中使用函数以及改用什么。简而言之，这是因为Angular中的变化检测机制。Angular 无法检测函数的结果是否更改，直到它运行函数函数。

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

Answer 2

我写了一个简单的 Angular 管道，它允许你将对象或回调函数作为过滤器传递。

请看以下示例：

Home.component.ts

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  array = [
    {type: 'log', name: 'Log 1'},
    {type: 'log', name: 'Log 2'},
    {type: 'log', name: 'Log 3'},
    {type: 'log', name: 'Log 4'},
    {type: 'event', name: 'Event 1'},
    {type: 'event', name: 'Event 2'},
    {type: 'event', name: 'Event 3'},
    {type: 'event', name: 'Event 4'}
  ];
  complexFilter = (item, index) => item.type === 'event' && index % 2 !== 0;
}

首页.组件.html

<h1>All items</h1>
<div *ngFor="let item of array">
  {{item.name}}
</div>
<h1>Only logs</h1>
<div *ngFor="let item of array | dynamicFilter: { type: 'log'}">
{{item.name}}
</div>
<h1>Complex filter</h1>
<div *ngFor="let item of array | dynamicFilter: complexFilter">
  {{item.name}}
</div>

输出将是

All items
Log 1
Log 2
Log 3
Log 4
Event 1
Event 2
Event 3
Event 4
   
Only logs
Log 1
Log 2
Log 3
Log 4
Complex filter
Event 2
Event 4

如您所见，您可以在模板中提供一个简单的筛选器对象或一个复杂的筛选器回调函数。

您可以在此处找到dynamicFilter管道的源代码。

Answer 3

让它成为一个应用你的标准的函数：

<span class="todo-count"><strong>{{filterValue()}}</strong> left</span>

在您的控制器中

      filterValue() : number 
      { 
          return todos.filter(...);
       }

Answer 4

我使用 lodash 来解决这类问题。

你可以像这样安装它...https://medium.com/@gtsopour/importing-lodash-into-angular-2-typescript-application-94590365f46d#.bsepr3agd

然后使用其过滤函数过滤视图中的数组...https://lodash.com/docs/4.17.4#filter