Angular 2 Pipe verändert den ursprünglichen Wert, was dazu führt, dass andere Listen sich ändern

Question

Ich habe ein seltsames Pipe-Problem, das ich beim Durchsuchen der Pipe-Dokumente nicht gefunden habe.

Grundsätzlich habe ich eine Pipe, die ein Array von Objekten sortiert, Problem ist, dass, wenn mehrere Listen aus der gleichen Quelle wiederholt werden, diese Listen auch ändern, die ungerade ist. Es sieht so aus, als ob die Pipe die ursprüngliche Quelle verändert, die dann alles ändert, was darauf basiert.

Wenn ich von dieser wiederhole:

public options: any[] = [ 
    {label: 'Item 1'}, 
    {label: 'Item 3'}, 
    {label: 'Item 6'}, 
    {label: 'Item 2'} 
]; 

dann eine Liste hat, die von einer Abfrage herausgefiltert werden kann:

<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> 

Und dann ein anderes, wo ich ein Rohr verwenden, sortiert:

<!-- 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> 

Rohr, die sortiert:

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

Ich werde beide Listen bekommen zeigt:

• Artikel 1
• Artikel 2
• Artikel 3
• Artikel 6

Wie kann ich diese ziemlich seltsam Verhalten zu vermeiden?

Answer 1

Die Methode sort aktualisiert das aktuelle Array und gibt es zurück. Um das ursprüngliche Array nicht zu aktualisieren, müssen Sie ein neues erstellen, z. B. mit der Methode slice.

Sie könnten versuchen, die folgenden:

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