Пользовательская труба возвращает ошибку. :: TypeScript & Angular2

Question

Я недавно ввел новый код в свой код. Кажется, все в порядке, но при компиляции приложения я получаю сообщение об ошибке. Вот те части приложения:

app.component.ts файл:

import {SortPipe} from "./sort.pipe"; 

@Component({ 
    templateUrl: './app.component.html', 
    pipes: [ SortPipe ] 
}) 

sort.pipe.ts файл:

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'sort' 
}) 
export class SortPipe implements PipeTransform { 

    private ts: number; 

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

} 

app.component.html файл:

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

Ошибка, который я получаю:

ERROR в [по умолчанию] C: \ Users \ app.component.ts: 11: 2 Аргумент типа «{селекторного: строка; шаблон: любой; стили: any []; pipe: typeof SortPipe []; } 'не присваивается параметру типа «Компонент». Литерал объекта может указывать только известные свойства, а «pipe» не существует в типе «Компонент».

Я не знаю, почему это происходит, потому что я прочитал некоторую информацию о SO об этой проблеме и ее решении в большинстве случаев просто включить имя канала в app.module.ts. Мой модуль выглядит (уменьшенная версия):

import { SortPipe } from './sort.pipe'; 

@NgModule({ 
    declarations: [ 
    SortPipe 
    ] 
}) 
export class AppModule { } 

Если кто-нибудь есть какие-либо идеи, как это исправить, или какие-то намеки, пожалуйста, поделитесь.

Answer 1

Для более новых версий углового Cli вы не должны объявлять трубы внутри компонента или даже импортировать его непосредственно к компоненту.Просто объявить трубу внутри .module файла:

import { SortPipe } from 'sort.pipe'; 

@NgModule({ 
    declarations: [ 
    SortPipe 
}) 

Если вы хотите, чтобы отсортировать массив объектов по указанному свойству, используйте следующий код:

sort.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({ 
    name: 'sort' 
}) 
export class SortPipe implements PipeTransform { 

    private name: any; 

    transform(array: any, args: any): any { 
    array.sort((a: any, b: any) => 
     a.property - b.property  //in your case: a.name - b.name 
    ); 
    return array; 
    } 
} 

Важно: Помните, что свойство, которое вы хотите отсортировать массив, должно быть типом number или any. Если свойство является строкой, вы должны объявить тип как any.

Последний шаг подключения трубы с *ngFor петли:

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

Answer 2

Я не думаю, что вам не нужно, чтобы сделать модуль для труб, вы можете непосредственно вводить в вашем app.module.ts так:

import {SortPipe} from "YOURPATH/sort.pipe"; 

затем вводят его в declarations так:

declarations: [..., SortPipe] 

и теперь используют это где угодно в вашем приложении.

Работа pipe кода:

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'sort' 
}) 

export class SortPipe implements PipeTransform { 
    transform(value: any, args: string[]): any {  
     value.sort(function(a, b) { 
      return (a.ts > b.ts) ? 1 : ((b.ts > a.ts) ? -1 : 0); }); 

     return value; 
    } 
}