<div class="resultados" *ngIf="livrosEncontrados$ | async">
<strong>{{ livrosResultado.totalItems }}</strong>
<p> resultados encontrados</p>
</div>
<div
class="container-card"
*ngIf="
livrosEncontrados$ | async as listaLivrosObTidosVariavelDeclaradaAqui;
else telaInicial
"
>
<div *ngFor="let livro of listaLivrosObTidosVariavelDeclaradaAqui">
<app-livro [livro]="livro"></app-livro>
</div>
No meu caso, se eu deixo assim, e utilizo tap, (que agora ta comentado), o código não funciona. Dando erro no 'of' do ngFor. Dizendo esse erro
*Type 'unknown' is not assignable to type 'NgIterable'.ngtsc(2322) lista-livros.component.ts(16, 3): Error occurs in the template of component ListaLivrosComponent. declare (property) NgForOf<any, NgIterable>.ngForOf: NgIterable The value of the iterable expression, which can be used as a template input variable. *
livrosEncontrados$ = this.searchField.valueChanges.pipe(
debounceTime(pausa),
tap(() => console.log('Fluxo inicial')),
filter((valorDigitado) => valorDigitado.length >= 3),
distinctUntilChanged(),
switchMap((valorDigitado) => this.service.getBooks(valorDigitado)),valor
// tap((retornoDaAPI) => console.log('RetornoTAP', retornoDaAPI)),
map(resultado => this.livrosResultado = resultado),
map(resultado => resultado.items ?? []),
map(itens =>
this.livrosResultadoParaLivros(itens)
),
catchError(error => {
this.mensagemError = 'Ops, houve um erro. Recarregue a aplicação'
return EMPTY
})
)
Por que? O tap não deveria NÃO intervir no resultado do fluxo?
