Angular 2 管道修改原始值导致其他列表更改
Angular 2 pipe modifies original value causing other lists to change
我有一个奇怪的管道问题,我在搜索管道文档时没有找到解释。
基本上我有一个对对象数组进行排序的管道,问题是如果从同一来源重复更多列表,那么这些列表也会发生变化,这很奇怪。似乎管道正在修改原始源,然后导致基于它的所有内容都发生变化。
如果我从这里重复:
public options: any[] = [
{label: 'Item 1'},
{label: 'Item 3'},
{label: 'Item 6'},
{label: 'Item 2'}
];
然后有一个可以通过查询过滤掉的列表:
<div>
<form-input [(model)]="query" placeholder="Write a search query"></form-input>
<ul>
<li *ngFor="#option of options | filterObjects:query">
{{option.label}}
</li>
</ul>
</div>
然后有另一个我使用排序的管道:
<!-- This list's pipe will also affect the list above since they repeat from the same list -->
<div>
<ul>
<li *ngFor="#option of options | orderByProperty:'label'">
{{option.label}}
</li>
</ul>
</div>
排序管道:
import {Pipe} from 'angular2/core';
@Pipe({
name: 'orderByProperty'
})
export class OrderByPropertyPipe {
transform(value, args) {
if (!args[0]) {
return value;
}
else if (value) {
return value.sort(function(a,b) {
return (a[args[0]] > b[args[0]]) ? 1 : ((b[args[0]] > a[args[0]]) ? -1 : 0);
});
}
}
}
我将显示两个列表:
- 项目 1
- 项目 2
- 项目 3
- 项目 6
我怎样才能避免这种相当奇怪的行为?
sort
方法更新当前数组并 return 它。不是要更新原来的数组,需要新建一个,比如用slice
的方法。
您可以尝试以下方法:
@Pipe({
name: 'orderByProperty'
})
export class OrderByPropertyPipe {
transform(value, args) {
var sortedArray = value.slice();
if (!args[0]) {
return sortedArray;
} else if (sortedArray) {
return sortedArray.sort(function(a,b) {
return (a[args[0]] > b[args[0]]) ? 1 :
((b[args[0]] > a[args[0]]) ? -1 : 0);
});
}
}
}
我有一个奇怪的管道问题,我在搜索管道文档时没有找到解释。
基本上我有一个对对象数组进行排序的管道,问题是如果从同一来源重复更多列表,那么这些列表也会发生变化,这很奇怪。似乎管道正在修改原始源,然后导致基于它的所有内容都发生变化。
如果我从这里重复:
public options: any[] = [
{label: 'Item 1'},
{label: 'Item 3'},
{label: 'Item 6'},
{label: 'Item 2'}
];
然后有一个可以通过查询过滤掉的列表:
<div>
<form-input [(model)]="query" placeholder="Write a search query"></form-input>
<ul>
<li *ngFor="#option of options | filterObjects:query">
{{option.label}}
</li>
</ul>
</div>
然后有另一个我使用排序的管道:
<!-- This list's pipe will also affect the list above since they repeat from the same list -->
<div>
<ul>
<li *ngFor="#option of options | orderByProperty:'label'">
{{option.label}}
</li>
</ul>
</div>
排序管道:
import {Pipe} from 'angular2/core';
@Pipe({
name: 'orderByProperty'
})
export class OrderByPropertyPipe {
transform(value, args) {
if (!args[0]) {
return value;
}
else if (value) {
return value.sort(function(a,b) {
return (a[args[0]] > b[args[0]]) ? 1 : ((b[args[0]] > a[args[0]]) ? -1 : 0);
});
}
}
}
我将显示两个列表:
- 项目 1
- 项目 2
- 项目 3
- 项目 6
我怎样才能避免这种相当奇怪的行为?
sort
方法更新当前数组并 return 它。不是要更新原来的数组,需要新建一个,比如用slice
的方法。
您可以尝试以下方法:
@Pipe({
name: 'orderByProperty'
})
export class OrderByPropertyPipe {
transform(value, args) {
var sortedArray = value.slice();
if (!args[0]) {
return sortedArray;
} else if (sortedArray) {
return sortedArray.sort(function(a,b) {
return (a[args[0]] > b[args[0]]) ? 1 :
((b[args[0]] > a[args[0]]) ? -1 : 0);
});
}
}
}