Angular 管道更改原始对象
Angular pipe changes original object
我有一个管道可以通过用户输入的日期范围过滤数组,过滤器在缩小数组时工作正常但之后增加日期范围,管道再次使用小数组,这是结果之前的过滤器。
谁能解释一下我做错了什么?提前致谢。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'dateinrangePipe'
})
export class DateInRangePipe implements PipeTransform {
transform(obj: any[], from: Date, to: Date): any[] {
if (obj && from && to) {
console.log('before:');
obj.forEach(data => {
console.log(data.name);
data.series = data.series.filter((item: any) => {
return this.inRange(item.name, from, to);
});
});
}
console.log(obj);
return [...obj];
}
inRange(date: Date, from: Date, to: Date): boolean {
return date.getTime() >= from.getTime() &&
date.getTime() <= to.getTime() ? true : false;
}
}
编辑:
管道用于 ngx-chart 的数据
<ngx-charts-line-chart
...
[results]="multi | dateinrangePipe: from: to"
...>
</ngx-charts-line-chart>
你return输入数据的副本,但这是没有意义的,因为你之前给data.series
赋值。由于 data
是引用,因此您修改 obj
.
您可以添加-
const strObj = JSON.stringfy(obj);
const copyObj = JSON.parse(strObj);
我认为这是一个简单的解决方案,因为扩展运算符和 Object.assign
不会影响对象内部。
我有一个管道可以通过用户输入的日期范围过滤数组,过滤器在缩小数组时工作正常但之后增加日期范围,管道再次使用小数组,这是结果之前的过滤器。
谁能解释一下我做错了什么?提前致谢。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'dateinrangePipe'
})
export class DateInRangePipe implements PipeTransform {
transform(obj: any[], from: Date, to: Date): any[] {
if (obj && from && to) {
console.log('before:');
obj.forEach(data => {
console.log(data.name);
data.series = data.series.filter((item: any) => {
return this.inRange(item.name, from, to);
});
});
}
console.log(obj);
return [...obj];
}
inRange(date: Date, from: Date, to: Date): boolean {
return date.getTime() >= from.getTime() &&
date.getTime() <= to.getTime() ? true : false;
}
}
编辑:
管道用于 ngx-chart 的数据
<ngx-charts-line-chart
...
[results]="multi | dateinrangePipe: from: to"
...>
</ngx-charts-line-chart>
你return输入数据的副本,但这是没有意义的,因为你之前给data.series
赋值。由于 data
是引用,因此您修改 obj
.
您可以添加-
const strObj = JSON.stringfy(obj);
const copyObj = JSON.parse(strObj);
我认为这是一个简单的解决方案,因为扩展运算符和 Object.assign
不会影响对象内部。