파이프 ''을 (를) 찾을 수 없습니다. angular2 사용자 지정 파이프

이 오류를 수정할 수없는 것 같습니다. 검색 창과 ngFor가 있습니다. 다음과 같은 사용자 지정 파이프를 사용하여 배열을 필터링하려고합니다.

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

import { User } from '../user/user';

@Pipe({
  name: 'usersPipe',
  pure: false
})
export class UsersPipe implements PipeTransform {
  transform(users: User [], searchTerm: string) {
    return users.filter(user => user.name.indexOf(searchTerm) !== -1);
  }
}

용법:

<input [(ngModel)]="searchTerm" type="text" placeholder="Search users">

<div *ngFor="let user of (users | usersPipe:searchTerm)">
...
</div>

오류:

zone.js:478 Unhandled Promise rejection: Template parse errors:
The pipe 'usersPipe' could not be found ("
<div class="row">
    <div  
    [ERROR ->]*ngFor="let user of (user | usersPipe:searchTerm)">

각도 버전 :

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"bootstrap": "^3.3.6",
"zone.js": "^0.6.12"

"교차 모듈"문제 가 없는지 확인하십시오.

파이프를 사용하는 구성 요소가 "전역 적으로"파이프 구성 요소를 선언 한 모듈에 속하지 않으면 파이프를 찾을 수 없으며이 오류 메시지가 표시됩니다.

제 경우에는 별도의 모듈에서 파이프를 선언하고 파이프를 사용하는 구성 요소가있는 다른 모듈에서이 파이프 모듈을 가져 왔습니다.

파이프를 사용하는 구성 요소가

파이프 모듈

 import { NgModule }      from '@angular/core';
 import { myDateFormat }          from '../directives/myDateFormat';

 @NgModule({
     imports:        [],
     declarations:   [myDateFormat],
     exports:        [myDateFormat],
 })

 export class PipeModule {

   static forRoot() {
      return {
          ngModule: PipeModule,
          providers: [],
      };
   }
 } 

다른 모듈에서의 사용 (예 : app.module)

  // Import APPLICATION MODULES
  ...
  import { PipeModule }    from './tools/PipeModule';

  @NgModule({
     imports: [
    ...
    , PipeModule.forRoot()
    ....
  ],

모듈 선언에 파이프를 포함해야합니다.

declarations: [ UsersPipe ],
providers: [UsersPipe]

Ionic의 경우 @Karl이 언급했듯이 여러 문제에 직면 할 수 있습니다. 이온 지연로드 페이지에 대해 완벽하게 작동하는 솔루션은 다음과 같습니다.

1. pipes.ts 및 pipes.module.ts 파일로 파이프 디렉토리를 작성하십시오.

// pipes.ts 콘텐츠 (내부에 여러 개의 파이프가있을 수 있습니다.

use @Pipe function before each class)
import { PipeTransform, Pipe } from "@angular/core";
@Pipe({ name: "toArray" })
export class toArrayPipe implements PipeTransform {
  transform(value, args: string[]): any {
    if (!value) return value;
    let keys = [];
    for (let key in value) {
      keys.push({ key: key, value: value[key] });
    }
    return keys;
  }
}

// pipes.module.ts 콘텐츠

import { NgModule } from "@angular/core";
import { IonicModule } from "ionic-angular";
import { toArrayPipe } from "./pipes";

@NgModule({
  declarations: [toArrayPipe],
  imports: [IonicModule],
  exports: [toArrayPipe]
})
export class PipesModule {}

2. App.module 및 @NgModule 가져 오기 섹션에 PipesModule 포함

   import { PipesModule } from "../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] });

3. 사용자 지정 파이프를 사용하려는 각 .module.ts에 PipesModule을 포함합니다. 가져 오기 섹션에 추가하는 것을 잊지 마십시오. // 예. 파일 : pages / my-custom-page / my-custom-page.module.ts

   import { PipesModule } from "../../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] })

4. 그게 다야. 이제 템플릿에서 사용자 지정 파이프를 사용할 수 있습니다. 전의.

<div *ngFor="let prop of myObject | toArray">{{ prop.key }}</div>

위의 "교차 모듈"답변이 내 상황에 매우 유용하다는 것을 알았지 만 고려해야 할 또 다른 주름이 있으므로 확장하고 싶습니다. 하위 모듈이있는 경우 내 테스트에서 상위 모듈의 파이프도 볼 수 없습니다. 따라서 별도의 모듈에 파이프를 넣어야 할 수도 있습니다.

다음은 하위 모듈에 표시되지 않는 파이프를 해결하기 위해 수행 한 단계의 요약입니다.

1. (상위) SharedModule에서 파이프를 가져와 PipeModule에 넣습니다.
2. SharedModule에서 PipeModule 가져 오기 및 내보내기 ( 자동으로 PipeModule 에 액세스하기 위해 SharedModule 에 종속 된 앱의 다른 부분 )
3. Sub-SharedModule의 경우 PipeModule을 가져 와서 다른 문제 중에서 순환 종속성 문제를 일으키는 SharedModule을 다시 가져올 필요없이 PipeModule에 액세스 할 수 있습니다.

위의 "교차 모듈"답변에 대한 또 다른 각주 : PipeModule을 만들 때 forRoot 정적 메서드를 제거하고 공유 모듈에없는 PipeModule을 가져 왔습니다. 내 기본적인 이해는 forRoot가 필터에 반드시 적용되지 않는 싱글 톤과 같은 시나리오에 유용하다는 것입니다.

여기에 다른 대답을 제안 하십시오.

파이프에 대해 별도의 모듈을 만드는 것은 필수 는 아니지만 확실히 대안입니다. 공식 문서 각주 확인 : https://angular.io/guide/pipes#custom-pipes

기본 제공 파이프를 사용하는 것과 동일한 방식으로 사용자 지정 파이프를 사용합니다.
AppModule의 선언 배열에 파이프를 포함해야합니다. 파이프를 클래스에 주입하기로 선택한 경우 NgModule의 공급자 배열에 파이프를 제공해야합니다.

여러분이해야 할 일은 선언 배열에 파이프를 추가 하고 파이프를 사용하려는 곳에 공급자 배열을 추가하는 module것입니다.

declarations: [
...
CustomPipe,
...
],
providers: [
...
CustomPipe,
...
]

노트 : 각도 모듈을 사용하지 않는 경우에만

어떤 이유로 이것은 문서에는 없지만 구성 요소에서 사용자 정의 파이프를 가져와야했습니다.

import {UsersPipe} from './users-filter.pipe'

@Component({
    ...
    pipes:      [UsersPipe]
})

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

@Pipe({
  name: 'timePipe'
})
export class TimeValuePipe implements PipeTransform {

  transform(value: any, args?: any): any {
   var hoursMinutes = value.split(/[.:]/);
  var hours = parseInt(hoursMinutes[0], 10);
  var minutes = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
  console.log('hours ', hours);
  console.log('minutes ', minutes/60);
  return (hours + minutes / 60).toFixed(2);
  }
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  order = [
    {
      "order_status": "Still at Shop",
      "order_id": "0:02"
    },
    {
      "order_status": "On the way",
      "order_id": "02:29"
    },
    {
      "order_status": "Delivered",
      "order_id": "16:14"
    },
     {
      "order_status": "Delivered",
      "order_id": "07:30"
    }
  ]
}

Invoke this module in App.Module.ts file.

파이프가있는 동일한 디렉토리에 파이프 모듈을 만들었습니다.

import { NgModule } from '@angular/core';
///import pipe...
import { Base64ToImage, TruncateString} from './'  

   @NgModule({
        imports: [],
        declarations: [Base64ToImage, TruncateString],
        exports: [Base64ToImage, TruncateString]
    })

    export class SharedPipeModule { }   

이제 app.module에서 해당 모듈을 가져옵니다.

import {SharedPipeModule} from './pipe/shared.pipe.module'
 @NgModule({
     imports: [
    ...
    , PipeModule.forRoot()
    ....
  ],

이제 중첩 된 모듈에서 동일한 항목을 가져 와서 사용할 수 있습니다.