カスタムパイプがAngular2で正しく機能しない

Question

パイプはnameプロパティでオブジェクトの配列をソートしなければなりません。

ソートby.pipe.ts：

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({ 
    name: 'sortBy' 
}) 
export class SortByPipe implements PipeTransform { 
    private name: string; 

    transform(array: Array<any>, args: string[]): Array<any> { 
    array.sort((a: any, b: any) => { 
     if (a.name < b.name) { 
     return -1; 
     } else if (a.name > b.name) { 
     return 1; 
     } else { 
     return 0; 
     } 
    }); 
    return array; 
    } 
} 

app.component.html：

<table> 
    <tr *ngFor="let elem of _values | sortBy"> 
     <td>{{ elem.name }}</td> 
     <td>{{ elem.ts }}</td> 
     <td>{{ elem.value }}</td> 
    </tr> 
    </table> 

app.module.ts：

//other imports 
import { SortByPipe } from './sort-by.pipe'; 

@NgModule({ 
    declarations: [ 
    SortByPipe 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [] 
}) 
export class AppModule { } 

オブジェクトの配列：

[{ 
    "name": "t10", 
    "ts": 1476778297100, 
    "value": "32.339264", 
    "xid": "DP_049908" 
}, { 
    "name": "t17", 
    "ts": 1476778341100, 
    "value": "true", 
    "xid": "DP_693259" 
}, { 
    "name": "t16", 
    "ts": 1476778341100, 
    "value": "true", 
    "xid": "DP_891890" 
}]; 

それは適切にオブジェクトをソートしませんが、また、すべてのエラーをスローしません。
おそらくファイルに問題がありますか？

Answer 1

問題は、配列自体ではなく要素をパイプしていることです。

あなたはこれにこの

<tr *ngFor="let elem of _values | sortBy"> 

を変更する必要があります。

<tr *ngFor="let elem of (_values | sortBy)"> 

Answer 2

あなたはpure: falseを追加しようとしたことがありますか？

入力が変更されたりしませ

@Pipe({ 
    name: "sort", 
    pure: false 
})