3
respostas

'ap-search' não é um elemento

Boa tarde,

Estou com problemas nessa aula, criei o componente, mas preferi criar por linha de comando:

ng g c photos/photo-list/search

exatamente pra atualizar o "photo-list.module.ts", verifiquei e o SearchComponent esta configurado no module, atualmente o "PhotoListModule" esta assim:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoadButtonComponent } from './load-button/load-button.component';
import { PhotosComponent } from './photos/photos.component';
import { PhotoListComponent } from './photo-list.component';
import { FilterByDescription } from './filter-by-description.pipe';
import { PhotoModule } from '../photo/photo.module';
import { SearchComponent } from './search/search.component';

@NgModule({
    declarations:[
        LoadButtonComponent,
        PhotosComponent,
        PhotoListComponent,
        FilterByDescription,
        SearchComponent
    ], 
    imports:[
        CommonModule,
        PhotoModule
    ]
})
export class PhotoListModule{}

o "photo-list.component.html" esta assim:

<ap-search></ap-search>

<p *ngIf="!photos.length" class="text-center text-muted">
    Sorry, no photos
</p>

<ap-photos [photos]="photos | filterByDescription: filter"></ap-photos>

<app-load-button (click)="load()" [hasMore]="hasMore"></app-load-button>

o search.component.html:

<div class="text-center mt-3 mb-3">
    <form>
        <i aria-hidden="true" class="fa fa-search mr-2"></i>
        <input
            class="rounded"
            type="search"
            placeholder="search..."
            autofocus
            (keyup)="debounce.next($event.target.value)">
    </form>
</div> 

assim está o search.component.ts:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'ap-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit, OnDestroy {

  private debounce: Subject<string> = new Subject<string>();
  private filter: string = "";


  constructor() { }

  ngOnInit() {
    this.debounce
    .pipe(debounceTime(300))
    .subscribe(filtro => this.filter=filtro);
  }

  ngOnDestroy(): void {
    this.debounce.unsubscribe();
  }
}

alguem pode me dar uma ajuda?

3 respostas

Fala aí Allan, tudo bem? Estranho, parece correto, se você rodou o comando enquanto o servidor estava em pé, sugiro para o servidor e subir novamente, as vezes o Angular se perde.

Do contrário eu precisaria ver na minha máquina o problema, pois, os códigos parecem estar correto (posso ter passado algum detalhe).

O projeto está no Github?

Espero ter ajudado.

não, o servidor estava parado eu subo o servidor pelo terminal da própria ide, assim como executo o comando de criação dos componentes e modulos na IDE.

infelizmente não estou com os codigos agora, estou fazendo no trabalho no horário de almoço, mas vou subir pro git amanha e lhe envio o fonte.

Olá Allan,

Estava com o mesmo problema, resolvi quando mudei a declaração do SearchComponent no PhotoListModulepara o PhotosModule.