Pipes Angular 2 动态数组长度答案

【问题标题】：Pipes Angular 2 dynamic Array LengthPipes Angular 2 动态数组长度
【发布时间】：2017-11-26 17:55:51
【问题描述】：

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

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

我有一个函数可以在这个数组中添加或删除元素，问题是当发生变化时管道不会更新数组长度。

【问题讨论】：

为什么不直接Element numer: {{listOfIdToExport.length}} - HTML
哎呀，不知道这么简单的THX；）

标签： angular typescript angular2-pipe

【解决方案1】：

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

Angular 仅在检测到对输入值。纯粹的改变要么是对原始输入的改变值（字符串、数字、布尔值、符号）或更改的对象引用（日期、数组、函数、对象）。

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

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

export class LengthOfArrayPipe implements PipeTransform {

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

}

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

【讨论】：

谢谢它也可以工作，我让它变得非常复杂

【解决方案2】：

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

【讨论】：