-4

Estou tentando fazer uma pesquisa usanda a API da Marvel, pude ver que o existe o parâmetro nameStartsWith onde posso enviar o texto da pesquisa via input. Como retornaria esses dados? O meu subscribe parece não estar funcionando, errei em alguma coisa?

export class ListHeroesComponent implements OnInit {
  allCharacters$?: Observable<any>
  constructor(private characterService:CharacterService) {
    this.allCharacters$ = characterService.getPersonagens().subscribe();
  }

  ngOnInit (): void {
  }
 
}

o meu service.ts está dessa forma

 constructor(private http: HttpClient) { }

  getPersonagens(): Observable<any> {
    const page = this.getPage('characters');
    return this.http.get<any>(page).pipe(map((data: any) => data.data.results))
  }


  getPage(page:string): string {
    return `${this.URL+page}?ts=1&apikey=${this.PUBLIC_KEY}&hash=${this.HASH}&limit=10`
  }

  getSearch(page:string, search:string): string {
    return `${this.URL+page}?ts=1&apikey=${this.PUBLIC_KEY}&hash=${this.HASH}&nameStartsWith=${search}&limit=10`
  }

e por fim o .ts do componente search

 search:string = "";
  constructor(private characterService:CharacterService) { }

  ngOnInit(): void {
  }

  setSearch(){
    this.characterService.getSearch('characters', this.search);
  }

Eu gostaria de que, quando eu receber o valor no search e bater la no service. A lista que esta inscrita perceber que houve uma alteraçâo e com isso atualizar a lista de personagens que é a allCharacters

1
  • comentem ao menos o porque estao negativando ao invés de responderem. Assim eu posso alterar a pergunta de uma forma ideal. Só negativar nao ajuda em nada. Nem eu, nem a questao, nem o sistema do stack Commented 24/07/2022 às 1:31

1 Resposta 1

0

Olá, Veronica! Você declarou sua variável allCharacters$ como uma Observable<any> enquanto no seu construtor você tenta atribuir uma Subscription do seu método getPersonagens nessa mesma variável. Para manter sua variável como uma Observable, apenas atribua à ela o Obersable<any> retornado do seu método getPersonagens, e no template do seu componente você utilizaria o Pipe Async para fazer a chamada na sua service e retornar os dados. Ficaria assim:

export class ListHeroesComponent implements OnInit {
  allCharacters$?: Observable<any>
  
  constructor(private characterService: CharacterService) {}

  ngOnInit (): void {
    this.allCharacters$ = this.characterService.getPersonagens(); //removendo o subscribe(), assim o método retorna um Observable, e movendo para o ngOnInit para executar quando o componente é inicializado
  }
 
}

No seu template, você agora consegue usar o Pipe Async para exibir os resultados:

<div *ngIf="allCharacters$ | async as characters">
  <!-- Bloco de código que tem acesso ao valor retornado para a variável allCharacters$ -->
  
  <!-- Exemplo de utilização -->
  <div *ngFor="let char of characters">{{char.name}}</div>
</div>

Quanto a lista perceber a alteração do search, caso o componente search seja filho do componente ListHeroesComponent, sugiro usar o decorator @Output() para emitir um evento ao componente pai toda vez que o search for realizado (link da documentação abaixo).

Aqui alguns links de referência:

https://angular.io/api/common/AsyncPipe

https://warcontent.com/angular-async-pipe/

https://angular.io/guide/inputs-outputs

Espero que ajude!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .