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 docs：

Angular仅在检测到纯粹的更改时执行纯管道输入值。纯粹的改变是对原始输入的改变 value（String，Number，Boolean，Symbol）或更改的对象引用（日期，数组，功能，对象）。

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

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

export class LengthOfArrayPipe implements PipeTransform {

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

}

您可以阅读有关管道here的更多信息。

Answer 2

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

管道Angular 2动态阵列长度

2 个答案: