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.