管道 Angular 2 动态数组长度

Question

是否可以使用管道动态显示数组的长度？这是我的代码：

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

@Pipe({
  name: 'lengthOfArray'
})
export class LengthOfArrayPipe implements PipeTransform {

  transform(value: any): number {
    return value.length;
  }

}

我像这样使用它：

成分

listOfIdToExport: any[] = [];

模板

Element numer: {{ listOfIdToExport | lengthOfArray }}

我有一个从该数组中添加或删除元素的函数，问题是管道在发生更改时不会更新数组长度。

Answer 1

当您从数组中添加或删除项目时，值不会更新，因为您的管道是纯的。来自 Angular 文档：

Angular 仅在检测到输入值的纯更改时才执行纯管道。纯更改是对原始输入值（字符串、数字、布尔值、符号）的更改或更改的对象引用（日期、数组、函数、对象）。

所以，你不改变对象引用，你只更新你的数组，因此，解决方案是让你的管道不纯，这将导致它在每个更改检测周期更新值：

@Pipe({
  name: 'lengthOfArray',
  pure: false
})

export class LengthOfArrayPipe implements PipeTransform {

    transform(value: any): number {
        return value.length;
    }

}

您可以在此处阅读有关管道的更多信息。