管道 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 executes a pure pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).

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

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

export class LengthOfArrayPipe implements PipeTransform {

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

}

您可以阅读更多关于管道的内容here。

Answer 2

更好的解决方案是更改向 listOfIdToExport 数组添加和删除元素的方式。您可以更改对数组的引用，以便 angular 更改检测工作而不是使管道不纯。

管道 Angular 2 动态数组长度

Pipes Angular 2 dynamic Array Length

typescript

angular2-pipe

angular