使用管道动态显示数组的长度是否可行?这是我的代码:
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 }}
我有一个函数可以添加或删除此数组中的元素,问题是管道在更改时不会更新数组长度。
答案 0 :(得分:4)
当您从数组中添加或删除项目时,值不会更新,因为您的管道是纯粹的。来自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的更多信息。
答案 1 :(得分:0)
更好的解决方案是更改添加和删除listOfIdToExport
数组中元素的方式。您可以更改对阵列的引用,以便角度变化检测工作,而不是使管道不纯。