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 に答える