Bom dia, estou tentando listar dados de uma API e está ocorrendo este erro:
Alguém poderia me ajudar, não estou conseguindo resolver, seguem os códigos:
Código HTML:
<div>
<mat-list>
<mat-list-item *ngFor="let p of crushes$ | async">
<h3 matline>Nome: {{p.nome}} - Apelido: {{p.apelido}}</h3>
<p matline>Whatsapp: {{p.whatsapp}}</p>
<p matline>Observações: {{p.observacoes}}</p>
<p matline>Foto: {{p.foto}}</p>
<p matline>Nota: {{p.nota}}</p>
<p matline>Data Inclusão: {{p.createdAt}}</p>
</mat-list-item>
</mat-list>
Código TS:
export class SwitchMergeComponent implements OnInit {
@ViewChild('searchBy', { static: true }) el: ElementRef;
searchInput: string = '';
crushes$: Observable<Crush[]>;
constructor(private http: HttpClient) { }
private readonly url: string = 'http://localhost:5000/api/find/';
ngOnInit() {
this.secondOption();
}
filterPeople(searchInput: string): Observable<Crush[]> {
if (searchInput.length === 0) {
return of([]);
}
else {
return this.http.get<Crush[]>('${this.url}${this.searchInput}');
}
}
secondOption() {
let keyup$ = fromEvent(this.el.nativeElement, 'keyup');
this.crushes$ = keyup$.pipe(mergeMap((e) => this.filterPeople(this.searchInput)));
}
}
Retorno da API quando mostro no console: