각도 4의 사용자 정의 파이프에서 '정의되지 않은'오류가 발생했습니다.

Question

정확하게 this 자습서와 같은 FlyingHeroesPipe 파이프를 만들었습니다.

하지만 콘솔에서 TypeError: allHeroes is undefined 오류가 표시됩니다. 나는 어떻게해야합니까? 그물을 많이 검색했지만 모든 샘플은 내 사용자 지정 파이프와 같았지만 나 외에는 다른 사람들을 위해 작동합니다.

SRC/응용 프로그램/비행 - heroes.component.html (전단지)

<div *ngFor="let hero of (heroes | flyingHeroes)"> {{hero.name}} </div>

: 내 각 버전은 5.0.1

업데이트

내 코드입니다 src/app/flying-heroes.pipe.ts

(210)

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

import { Flyer } from './heroes'; 

@Pipe({ name: 'flyingHeroes' }) 
export class FlyingHeroesPipe implements PipeTransform { 
    transform(allHeroes: Flyer[]) { 
    return allHeroes.filter(hero => hero.canFly); 
    } 
} 

는

NgModule({ 
    declarations: [ 
    FlyingHeroesPipe , 
... 
... 
... 

] 

Answer 1

간단한 방법을 (더 코드를 제공하지 않기 때문에 나는 당신의 링크를 내놓고있어)

transform(allHeroes: Flyer[]) { 
    return allHeroes ? allHeroes.filter(hero => hero.canFly) : []; 
} 

그냥 '당신이 돈 말한다 app.module.ts 영웅의 명단이 있습니다. 그래서 당신이하지 않으면, 빈 배열을 반환, 그렇지 않으면 그것을 필터링!

Answer 2

입력이 건설시 평가되는 것이 아니라 초기화 단계에서 평가된다는 사실을 알아야합니다.

다음 구성 요소에 "비행 - 영웅"당신이 하늘의 배열

@Compnent({...}) 
export class FlyinHeroesCompnent { 
    @Input() heroes: Flyer[] = []; 
    ... 
} 

아니면 파이프에와 "영웅"을 초기화 할 수 있겠지만,

transform(allHeroes: Flyer[] = []) { 
    return allHeroes.filter(hero => hero.canFly); 
} 

개인적으로 arrgument에 대한 기본 값을 설정 나는 두 번째 방법을 선호합니다