Angular 管道更改原始对象

Question

我有一个管道可以通过用户输入的日期范围过滤数组，过滤器在缩小数组时工作正常但之后增加日期范围，管道再次使用小数组，这是结果之前的过滤器。

谁能解释一下我做错了什么？提前致谢。

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>

Answer 1

你return输入数据的副本，但这是没有意义的，因为你之前给data.series赋值。由于 data 是引用，因此您修改 obj.

Answer 2

您可以添加-

const strObj = JSON.stringfy(obj);

const copyObj = JSON.parse(strObj);

我认为这是一个简单的解决方案，因为扩展运算符和 Object.assign 不会影响对象内部。

Angular 管道更改原始对象

Angular pipe changes original object

angular

angular-pipe