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

Cannot read property 'toLowerCase' of undefined (PIPE)

Caros, estou com um pequeno problema. Meu filtro estava sendo utilizado tranquilamente até chegar na etapa final do curso onde adicionamos Validators aos campos do formulário. Estas validações estão em funcionamento, porém, minha listagem que antes estava funcionando simplesmente parou. Abaixo estão os trechos de código necessários, caso necessitem de algo mais basta pedir.

Componente de imagem:

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

@Component({
    moduleId: module.id,
    selector: 'imagens',
    templateUrl: './imagens.component.html'
})
export class imagemComponent{
    @Input() titulo: string;
    @Input() url: string;
    @Input() descricao: string;
}

Pipe.ts

import {Pipe, PipeTransform} from '@angular/core';
import {imagemComponent} from './imagens.component';

@Pipe({
    name: 'filtroPorTitulo'
})
export class FiltrarPorTitulo implements PipeTransform{

    transform(imagens: imagemComponent[], filtro: string){
        filtro = filtro.toLowerCase();
      return imagens.filter(imagens => imagens.titulo.toLowerCase().includes(filtro));
    }
}

Imagem.module

import {NgModule} from '@angular/core';
import {imagemComponent} from './imagens.component'
import {FiltrarPorTitulo} from './imagens.pipes';

@NgModule({
    declarations:[
        imagemComponent,
        FiltrarPorTitulo
    ],
    exports:[
        imagemComponent,
        FiltrarPorTitulo
    ]
})
export class imagensModule{}

Template da listagem

<div class="jumbotron">
        <h1 class="text-center">Alurapic</h1>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <form>
                    <div class="input-group">
                        <span class="input-group-btn">
                            <a [routerLink]="['/cadastro']" class="btn btn-primary">Nova imagem</a>
                        </span>
                        <input #txtProcurado (keyup)="0" class="form-control" placeholder="filtrar pelo título"/>
                    </div>
                </form>
            </div>
        </div>
        <br>
        <div class="row" >
            <painel *ngFor="let imagem of imagens | filtroPorTitulo: txtProcurado.value" 
                titulo="{{imagem.titulo | uppercase}}" class="col-md-2">
                <imagens url="{{imagem.url}}" titulo="{{imagem.titulo}}"></imagens>
            </painel>
        </div>
    </div>

Erro no navegador:

TypeError: Cannot read property 'toLowerCase' of undefined
    at imagens.filter.imagens (imagens.pipes.ts:10)
    at Array.filter (<anonymous>)
    at FiltrarPorTitulo.transform (imagens.pipes.ts:10)
    at eval (core.umd.js:5721)
    at _View_ListagemComponent0.detectChangesInternal (ListagemComponent.ngfactory.js:214)
    at _View_ListagemComponent0.AppView.detectChanges (core.umd.js:9566)
    at _View_ListagemComponent0.DebugAppView.detectChanges (core.umd.js:9671)
    at _View_ListagemComponent_Host0.AppView.detectViewChildrenChanges (core.umd.js:9592)
    at _View_ListagemComponent_Host0.AppView.detectChangesInternal (core.umd.js:9577)
    at _View_ListagemComponent_Host0.AppView.detectChanges (core.umd.js:9566)

Caso seja necessário algo mais, basta pedir. Agradeço e conto com a ajuda de todos.

2 respostas
solução!

Por algum motivo, esta chegando uma imagem sem a propriedade titulo para seu filtro trabalhar. Experimente apagar todas as imagens do banco e cadastrá-las novamente. É comum o aluno gravar algumas imagens e por algum erro de databing que mais tarde ele corrige, a imagem fica no banco sem a informação e por isso o erro no pipe.

Ou você pode tratar com uma série de if's e assim preferir. Ou você pode ter falhado na validação e submeteu os dados inválidos, ai os campos que falharam na validação não são enviados. Pegou a ideia?

Flávio, muito obrigado pela ajuda. Encontrei aqui nos objetos tragos do server uma imagem apenas com seu id. Fiz a exclusão dela e tudo voltou a funcionar.

Muito obrigado.