Parece que meu método transform não tem um array de FotoComponent.
O valor de digitado
também parece ser vazio.
Posso estar enganado, mas parece que ele tenta executar transform() antes de concluir a requisição de /v1/fotos
.
listagem.component.html
<div class="jumbotron">
<h1 class="text-center">Alurapic</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 form-group">
<form class="form">
<span class="input-group">
<span class="input-group-btn">
<a [routerLink]="['/cadastro']" class="btn btn-primary">novo</a>
</span>
<input #textoProcurado (keyup)="0" type="text" class="form-control" placeholder="filtrar pelo título da foto">
</span>
</form>
</div>
<painel *ngFor="let foto of fotos | filtroPorTitulo:textoProcurado.value" titulo="{{foto.titulo | uppercase}}" class="col-md-2">
<foto url="{{foto.url}}}" titulo="{{foto.titulo}}"></foto>
</painel>
</div>
</div>
foto.pipes.ts
import { Pipe, PipeTransform } from '@angular/core';
import { FotoComponent } from './foto.component';
@Pipe({
name: 'filtroPorTitulo'
})
export class FiltroPorTitulo implements PipeTransform {
transform(fotos: FotoComponent[], digitado: string) {
digitado = digitado.toLowerCase();
return fotos.filter(foto => foto.titulo.toLowerCase().includes(digitado));
}
}
foto.module.ts
import { NgModule } from '@angular/core'
import { FotoComponent } from './foto.component'
import { FiltroPorTitulo } from './foto.pipes'
@NgModule({
declarations: [FotoComponent, FiltroPorTitulo],
exports: [FotoComponent, FiltroPorTitulo]
})
export class FotoModule { }