Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Filtro das fotos não funciona

Referente ao curso Angular 2: webapps ainda mais poderosas parte 1

por Aline Dias
| 164.4k xp | 32 posts
Desenvolvedora Front-end

Olá Pessoal, fui seguindo as video aulas do curso mas meu filtro das fotos pelo nome não funciona. Mesmo adicionando o (keyup)="0" na views.

Aonde estou errando?

foto.pipes.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) {

        digitado = digitado.toLowerCase();
        return fotos.filter( foto => foto.titulo.toLowerCase().includes(digitado));
    }
}

foto.component.ts

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

@Component({
    moduleId: module.id,
    selector: 'foto',
    templateUrl: './foto.component.html' 
})
export class FotoComponent {

    @Input() titulo: string;
    @Input() url: string;
    descricao: string;
}

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">
                        <!-- router carrega a view solicitada sem regarregar toda a app -->
                        <a [routerLink]="['/cadastro']" class="btn btn-primary">
                          Nova foto
                        </a>
                    </span>
                    <!-- campo para filtrar pelo titulo -->
                    <input class="form-control" #textoProcurado (keyup)="0"  
                    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" titulo="{{foto.titulo}}" class="col-md-2">
            <foto titulo="{{foto.titulo}} | filtroPorTitulo: textoProcurado.value" url="{{foto.url}}"></foto>
        </painel>
    </div><!-- fim row -->
</div>

app.module.ts

import 'rxjs/add/operator/map';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; //informa a plataforma do app
import { AppComponent } from './app.component';
import { FotoModule } from './foto/foto.module';
import { HttpModule } from '@angular/http';
import { PainelModule } from './painel/painel.module';
import { CadastroComponent } from './cadastro/cadastro.component';
import { ListagemComponent } from './listagem/listagem.component';
import { routing } from './routes';

@NgModule ({
    //Módulos que são importados na view 
    imports: [ 
        BrowserModule, 
        FotoModule, 
        HttpModule, 
        PainelModule, 
        routing,
    ],
    //componentes que fazem parte do módulo
    declarations: [ 
        AppComponent, 
        CadastroComponent, 
        ListagemComponent 
    ], 
    // Informa o primeiro componente a ser carregado
    bootstrap: [ AppComponent ] 
})

export class AppModule {

}
8 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Bom dia!

Você inicializou as propriedades de FotoComponent? Aliás você não disse o erro que acontece nem a mensagem de erro que aparece no console.

Compartilhe. Fique tranquila que vamos descobrir.

por Aline Dias
| 164.4k xp | 32 posts
Desenvolvedora Front-end

Olá Flávio, bom dia.

Não aparece nenhum erro no console, funciona normal, porém, quando digito qualquer letra no campo de filtro nada acontece.

foto.module.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { FotoComponent } from '../foto/foto.component';

@Component ({
    moduleId: module.id,
    selector: 'listagem',
    templateUrl: './listagem.component.html'
})

export class ListagemComponent {
    //Cria um array que vai armazenar os dados trazidos do servidor
    fotos: Object[] = [];

        //Constructor http que faz a requisição dos dados no servidor
        constructor(http: Http) {

            http.get('v1/fotos')
                .map(resposta => resposta.json()) //transforma a resposta em obj json
                .subscribe( // joga os dados no array fotos 
                fotos => this.fotos = fotos,
                erro => console.log(erro)
            );
        }    
}

foto.component.html

<img class="img-responsive center-block" src="{{url}}" alt="{{titulo}}">

listagem.compnent.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { FotoComponent } from '../foto/foto.component';

@Component ({
    moduleId: module.id,
    selector: 'listagem',
    templateUrl: './listagem.component.html'
})

export class ListagemComponent {
    //Cria um array que vai armazenar os dados trazidos do servidor
    fotos: Object[] = [];

        //Constructor http que faz a requisição dos dados no servidor
        constructor(http: Http) {

            http.get('v1/fotos')
                .map(resposta => resposta.json()) //transforma a resposta em obj json
                .subscribe( // joga os dados no array fotos 
                fotos => this.fotos = fotos,
                erro => console.log(erro)
            );
        }    
}
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Hum, em FotoModule, você importou e exportou o Pipe que criou, por exemplo:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FotoComponent } from './foto.component';
import { FiltroPorTitulo } from './foto.pipes';

@NgModule({
  imports: [ CommonModule ],
  declarations: [ FotoComponent, FiltroPorTitulo ],
  exports: [FotoComponent, FiltroPorTitulo]
})
export class FotoModule { }

Você fez as alterações com o compilador do TypeScript rodando?

por Aline Dias
| 164.4k xp | 32 posts
Desenvolvedora Front-end

Tentei reiniciar o servidor e compilador também, para ver se não podia ser alguma desatualização do código, mas continua não funcionando...

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Já vi o erro. Você esta aplicando o filtro na imagem, tem que ser o painel que é criado com ngFor.

por Aline Dias
| 164.4k xp | 32 posts
Desenvolvedora Front-end

Sim, segue código do foto.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FotoComponent } from './foto.component';
import { FiltroPorTitulo } from './foto.pipes';

@NgModule ({
    imports: [ CommonModule ],
    declarations: [ FotoComponent, FiltroPorTitulo ],
    exports: [ FotoComponent, FiltroPorTitulo ]
})

export class FotoModule {

}
solução!
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Você fez assim:

 <painel *ngFor="let foto of fotos" titulo="{{foto.titulo}}" class="col-md-2">
            <foto titulo="{{foto.titulo}} | filtroPorTitulo: textoProcurado.value" url="{{foto.url}}"></foto>
        </painel>

Eu ensino e faço no vídeo assim:

      <painel *ngFor="let foto of fotos | filtroPorTitulo:textoProcurado.value" titulo="{{foto.titulo}}" class="col-md-2">
            <foto titulo="{{foto.titulo}}" url="{{foto.url}}">
            </foto>
        </painel>

O nosso pipe é para ser aplicado no filtro da lista. Só ajusta que vai funcionar.

Sucesso e bom estudo minha aluna!

por Aline Dias
| 164.4k xp | 32 posts
Desenvolvedora Front-end

Perfeito Flávio, funcionou!

Obrigada.