1

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

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

如果我从这里重复：

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 项

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

4

1 回答 1

2

该sort方法更新当前数组并返回它。不更新原始数组，您需要创建一个新数组，例如使用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);
      });
    }
  }
}
于 2016-04-11T13:08:29.377 回答