Filter PIPES - Angular2

help
1

Hi,
I’m trying to implement the filter when searching for photos, using PIPES.
When I implement the filter, I can only load one photo from the database and does not display an error in the console, any suggestions?

paipes.ts

import { Pipe, PipeTransform } from '@angular/core';
import {FotoComponent} from './foto.component';
import { Meteor } from 'meteor/meteor';


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

    transform(fotos: FotoComponent[], digitado: string){ 
        if(fotos ===null ||digitado === null ){
            return '';
            
        }
        digitado = digitado.toLowerCase();      
        return fotos.filter( foto => foto.titulo.toLowerCase().includes(digitado));    
    }
}

filter.html

<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>
                     <!-- campo para filtrar pelo titulo -->
                    <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>
                    <!--filtroPorTitulo: textoProcurado.value-->
      <painel *ngFor="let foto of fotos | async | filtroPorTitulo: textoProcurado.value"  titulo="{{foto.titulo | uppercase }}"  role="complementary" class="col-md-2 col-md-push-0">
       <foto  titulo="{{foto.titulo}}" url="{{foto.url}}" ></foto>
      <button (click)="removeFoto(foto)">X</button>
      </painel>    
</div>

Without the filter the page loads normal

1600×900 87.7 KB

With the filter the page loads a photo only

1600×900 62 KB