自定义管道返回错误.:: TypeScript&角度2 [英] Custom pipe returns an error. ::TypeScript & Angular2

问题描述

我最近在代码中实现了一个新管道.一切似乎都很好，但是在编译应用程序时，我收到了一个错误.这是应用程序的一部分:

I've implemented a new pipe into my code recently. Everything seems to be fine, but while compiling the app, I'm receiving an error. Here's the parts of the app:

app.component.ts 文件:

app.component.ts file:

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

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

sort.pipe.ts 文件:

sort.pipe.ts file:

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 文件:

app.component.html file:

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

我收到的错误:

[默认] C:\ Users \ app.component.ts:11:2中的错误类型'{选择符:字符串;模板:任何；样式:任何[]；管道:typeof SortPipe [];}'不可分配给类型为'Component'的参数.对象文字只能指定已知的属性，而组件"类型中不存在管道".

ERROR in [default] C:\Users\app.component.ts:11:2 Argument of type '{ selector: string; template: any; styles: any[]; pipes: typeof SortPipe[]; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'pipes' does not exist in type 'Component'.

我真的不知道为什么会发生这种情况，因为我已经阅读了有关此问题的SO相关信息，大多数情况下，解决方案是将管道名称包含在 app.module.ts .我的模块看起来像(缩小版):

I don't really know why this happens, because I've read some informations on SO about this problem and the solution in most cases was just to include the pipe name in the app.module.ts. My module looks like (minified version):

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

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

如果有人对如何解决它有任何想法或任何提示，请分享.

If anybody got any ideas how to fix it or any hints, please share it.

推荐答案

对于angular-cli的较新版本，您不必在组件内部声明管道，甚至不必直接将其导入到组件中>.只需在 .module 文件中声明管道:

For the newer versions of angular-cli you don't have to declare pipes inside the component or even import it directly to the component. Just declare your pipe inside the .module file:

import { SortPipe } from 'sort.pipe';

@NgModule({
  declarations: [
    SortPipe
})

如果要按指定的属性对对象数组进行排序，请使用以下代码:

If you want to sort your array of objects by specified property, use following code:

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 .

Important: Remember, the property which you want to sort the array by has to be type of number or any. If the property is a string, you have to declare the type as any.

最后一步是使用 * ngFor 循环连接管道:

The last step is connecting your pipe with *ngFor loop:

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

这篇关于自定义管道返回错误.:: TypeScript&角度2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！