Também achei muito estranho não funcionar, mas sabe como é, as vezes o erro tá na nossa cara e não vemos. Eu ja dei continuidade a curso e concluí a segunda parte, mas o erro ainda persiste no Pipe ao excluir uma foto.
//listagem.component.ts
import {Component} from '@angular/core';
import { FotoService } from '../foto/foto.service';
import { FotoComponent } from '../foto/foto.component';
import { PainelComponent } from '../painel/painel.component';
@Component({
moduleId:module.id,
selector:'listagem',
templateUrl:'./listagem.component.html'
})
export class ListagemComponent{
fotos:FotoComponent[];
service:FotoService;
mensagem:string='';
constructor(service:FotoService){
this.service=service;
service.lista()
.subscribe(fotos=>{
this.fotos=fotos;
}, erro => console.log(erro))
}
remove(foto:FotoComponent,painel:PainelComponent){
this.service
.remove(foto)
.subscribe(
()=> {
painel.fadeOut(()=>{
let novasFotos = this.fotos.slice(0);
let indice = novasFotos.indexOf(foto);
novasFotos.splice(indice,1);
this.fotos = novasFotos;
console.log('Foto removida com sucesso');
this.mensagem='Foto removida com sucesso'
});
},
erro=>{
console.error(erro)
this.mensagem='Não foi possível remover a foto';
}
)
}
}
//listagem.component.ts
<div class="jumbotron">
<h1 class="text-center">Futurama</h1>
</div>
<div class="container">
<p *ngIf="mensagem.length" class="alert alert-info">{{mensagem}}</p>
<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>
</div>
<br>
<div class="row">
<painel #painel *ngFor="let foto of fotos | filtroPorTitulo: textoProcurado.value" titulo="{{foto.titulo | uppercase}}" class="col-md-2">
<a [routerLink]="['/cadastro',foto._id]">
<foto url="{{foto.url}}" titulo="{{foto.titulo}}"></foto>
</a>
<botao nome="Remover" estilo="btn-danger btn-block" (acao)="remove(foto,painel)" confirmacao="true"></botao>
</painel>
</div>
</div>
A única forma do foto.pipe.ts não apresentar o erro de undefined é fazendo um teste antes.
//foto.pipe.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){
if(fotos){
return fotos.filter(foto=>foto.titulo.toLowerCase().includes(digitado.toLowerCase()));
}
return fotos;
}
}
