Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Tela da aplicação não carrega as fotos

Olá pessoal, lá venho eu de novo. O App não carrega as fotos na página principal (listagem component) aparece o seguinte erro:

app/listagem/listagem.component.html:24:16 caused by: Cannot read property 'toLowerCase' of undefined

e

TypeError: Cannot read property 'toLowerCase' of undefined
    at eval (foto.pipes.ts:13)
    at Array.filter (<anonymous>)
    at FiltroPorTitulo.transform (

Perdi um tempo debugando e até refiz o capítulo novamente pra ver se perdi alguma coisa, mas aparentemente o código está como o das aulas. Para tirar a prova, fiz o download novamente do projeto, na aula 7, reinstalei os pacotes do npm, subi o server e quando abri a app o mesmo erro permanece. Alguma idéia do que possa ser?

Pra facilitar subi o proj no Github: https://github.com/alinedmelo/alurapic Print do erro: https://github.com/alinedmelo/alurapic/blob/master/erro-print.png

Se precisarem de algum trecho em específico eu colo aqui.

Obrigada.

6 respostas

Você inicializou as propriedades na classe FotoComponent? Durante o curso peço para fazer isso para resolver justamente esse problema.

Poste o código completo do pipe e do componente que o usa.

Olá, segue:

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 { CommonModule } from '@angular/common';
import { FotoComponent } from './foto.component';
import { FiltroPorTitulo } from './foto.pipes';

@NgModule({
  imports: [ CommonModule ],
  declarations: [ FotoComponent, FiltroPorTitulo ],
  exports: [FotoComponent, FiltroPorTitulo]
})
export class FotoModule { }
solução!

Compartilhe FotoComponent (quero verificar se você inicializou as propriedades).

Aline, retire o pipo do filtro, para testarmos se o problema é ele, não tive tempo de estar olhando o repositório no github.

Outro detalhe, seria fazer o log do que esta chegando no pipe para você.

Olá, era isso mesmo Flávio, não havia inicializado no foto component.

Fiz o import lá e agora funciona corretamente. Obrigada.

import { Component, Input } from '@angular/core';
import {} from './foto.pipes';

@Component({
    moduleId: module.id,
    selector: 'foto',
    templateUrl: './foto.component.html' 
})
export class FotoComponent {

    @Input() titulo: string = '';
    @Input() url: string = '';
    descricao: string = '';
    _id: string = '';
}

Excelente! Agora é continuar com o curso e ficar melhor do que já é neste fantástico framework!

Sucesso e bom estudo Aline!