Olá! Após realizar o exercício de cadastro de fotos a aplicação começou a apresentar o seguinte erro:
core.umd.js:3462 EXCEPTION: Error in http://localhost:3000/app/listagem/listagem.component.html:23:12 caused by: Cannot read property 'toLowerCase' of undefined
E com isso as fotos não aparecem mais na listagem. Porém, notei que no console mostra que foram adicionados dados no banco como mostro abaixo:
Adicionado com sucesso: x7aoki73WcGPEfmw Adicionado com sucesso: WR5XHw5FjIHq81Mw Adicionado com sucesso: 9LoRQM9fLv9M4aUF
Alguém pode me ajudar?
Arquivo 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>
<div class="input-group">
<span class="input-group-btn">
<a [routerLink] = "['/cadastro']" class="btn btn-primary">
Nova foto
</a>
</span>
<input #textoProcurado (keyup) = "0" class="form-control" placeholder="filtrar pelo título da foto">
</div>
</form>
</div> <!-- fim col-md-12 -->
</div> <!-- fim row -->
<br>
<div class="row">
<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> <!-- fim row -->
</div>arquivo listagem.component.ts
import { Component } from '@angular/core';
import { Http } from '@angular/http'
@Component ({
moduleId: module.id,
selector: 'listagem',
templateUrl: './listagem.component.html'
})
export class ListagemComponent {
fotos: Object[] = [];
constructor(http: Http){
http
.get('v1/fotos')
.map (res => res.json())
.subscribe(fotos => {
this.fotos = fotos;
console.log(this.fotos);
}, erro => console.log (erro));
}
}arquivo foto.pipe
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))
//console.log(fotos);
//console.log(digitado);
}
}
