Recently, I've encountered an issue with a pipe that I created. Despite having what seems like clear and straightforward code, I can't seem to pinpoint the exact issue.
Any thoughts or suggestions on what might be causing this problem?
Here's a look at my app.module:
import { HeroModule } from "./hero/hero.module";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, HeroModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
This is how my hero.module is structured:
import { HeroComponent } from './hero.component';
import { FlyersPipe } from '../pipes/flyers.pipe';
@NgModule({
imports: [
CommonModule
],
declarations: [HeroComponent, FlyersPipe],
exports: [HeroComponent, FlyersPipe]
})
export class HeroModule { }
Next, let's take a closer look at the flyers.pipe.ts file:
import { Pipe, PipeTransform } from '@angular/core';
import { Hero } from '../model/hero';
@Pipe({
name: 'appflyers'
})
export class FlyersPipe implements PipeTransform {
transform(heroes: Array<Hero>, args?: any): any {
console.info(heroes);
return heroes.filter(hero => hero.canFly);
}
}
Lastly, examining the code in hero.component.html:
<div *ngFor="let hero of heroes | appflyers">
{{hero | json}}
</div>
A recent EDIT was made adding heroes into the heroes property within the HeroComponent using the following code:
<input type="text" #box
(keyup.enter)="addHero(box.value); box.value=''"
placeholder="hero name">
<input type="checkbox" [checked]="canFly" (change)="canFly = !canFly"/>
Contained within the hero.component.ts file:
import { Component, OnInit } from '@angular/core';
import { Hero } from '../model/hero';
@Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
private heroes: Array<Hero> = new Array<Hero>();
private canFly: boolean = true;
constructor() { }
ngOnInit() {
}
private addHero(name: string) {
this.heroes.push(new Hero(name, null, this.canFly));
}
private reset() { this.heroes = this.heroes.slice(); }
}