Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Cannot read property filter of undefined

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 { }
1 resposta
solução!

Já achei minha falha. Eu havia me esquecido de inicializar fotos com um array vazio em listagem.component.js.

// ... 
export class ListagemComponent {
    fotos: Object[] = [];
// ...

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software