I'm attempting to showcase a list of users by taking the value from an input and using it as a parameter in a get() method. After receiving the response from the get() method, I am pushing it into an object and then trying to display this object in the template.
My objective was:
- Search for a user.
- Display this specific user.
- Search for another user.
- Display both the new user and the initial one together.
However, the template is generating an error:
{ "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": true, "value": { "url": "http://localhost:3000/users", "body": null, "reportProgress": false, "withCredentials": false, "responseType": "json", "method": "GET", "headers": { "normalizedNames": {}, "lazyUpdate": null, "headers": {} }, "params": { "updates": [ { "param": "user", "value": "Teste", "op": "s" } ], "cloneFrom": null, "encoder": {}, "map": {} }, "urlWithParams": "http://localhost:3000/users?user=Teste" } }, "operator": { "concurrent": 1 } }, "operator": {} }, "operator": {} }
Here's my component.ts code:
import { HttpClient, HttpParams } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-info',
templateUrl: './info.component.html',
styleUrls: ['./info.component.scss']
})
export class InfoComponent implements OnInit {
public buscar: string;
users: any;
private readonly url = 'http://localhost:3000/users';
select: any;
usuario = [
{
user: ''
}
];
constructor(private http: HttpClient) { }
ngOnInit() {
this.users = this.http.get(this.url);
}
getDados(event) {
if (event.keyCode === 13) {
const params = new HttpParams().set('user', this.buscar);
this.select = this.http.get(this.url, { params });
}
this.usuario.push({
user: this.select
});
}
}
And here's my component.html code:
<igx-input-group type="search" class="search">
<igx-prefix>
<igx-icon>search</igx-icon>
</igx-prefix>
<input #search igxInput placeholder="Buscar" (keydown)="getDados($event)" [(ngModel)]="buscar">
<igx-suffix *ngIf="search.value.length > 0" (click)="searchContact = null">
<igx-icon>clear</igx-icon>
</igx-suffix>
</igx-input-group>
<div class="list-sample">
<igx-list>
<igx-list-item isHeader="true">Users</igx-list-item>
<igx-list-item #item *ngFor="let users of users | async">
<div class="item-container">
<div class="contact">
<div class="contact__info">
<span class="id">{{users.id}} </span>
<span class="user">{{users.user}}</span>
</div>
</div>
</div>
</igx-list-item>
</igx-list>
</div>
<p *ngFor="let usuario of usuario">{{ usuario.user | json }}</p>
Any kind individual willing to assist would be greatly appreciated.