Angular 2 管道修改原始值导致其他列表更改

Question

我有一个奇怪的管道问题，我在搜索管道文档时没有找到解释。

基本上我有一个对对象数组进行排序的管道，问题是如果从同一来源重复更多列表，那么这些列表也会发生变化，这很奇怪。似乎管道正在修改原始源，然后导致基于它的所有内容都发生变化。

如果我从这里重复：

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

我怎样才能避免这种相当奇怪的行为？

Answer 1

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

Angular 2 管道修改原始值导致其他列表更改

Angular 2 pipe modifies original value causing other lists to change

angular2-pipe

angular