Отображение списка пользователей, использующих входное значение для добавления имен в список

Question

Я пытаюсь отобразить список пользователей, получающих значение ввода и использующих его в качестве параметра метода get(). Я получаю возврат get() и использую push для вставки его в объект, затем пытаюсь отобразить этот объект в шаблоне.

Я хотел:

1. Поиск пользователя.
2. Показать этого пользователя.
3. Поиск другого пользователя.
4. Показать другого пользователя вместе с первым.

Но шаблон показывает ошибку:

{ "_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": {} }

---

Мой компонент.ts:

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
    });
  }
}

Мой component.html:

<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>

Буду признателен за любую добрую душу, готовую помочь.

Answer 1

Итак, сегодня мне наконец-то удалось решить мою проблему. Тем не менее, idk, если это хорошее решение для него. Но я собираюсь оставить здесь то, что я сделал, с моим кодом, потому что это может кому-то помочь позже.

Вот изменения, которые я внес в мой component.ts:

import { HttpClient, HttpParams } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Observable, throwError, } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.scss']
})
export class InfoComponent implements OnInit {
  public buscar: string;
  users: Observable<any>;
  private readonly url = 'http://localhost:3000/users';
  select: {id: number; user: string} [];
  list: { user: string } [];
  showUser: { user: string } [];

  constructor(private http: HttpClient) {
    this.showUser = new Array<any>();
    this.list = new Array<any>();
  }

  ngOnInit() {
    this.getUsers();
  }

  getUsers() {
    this.http.get<{ id: number; user: string; }[]>(this.url)
    .pipe(
      map(data => {
        return data.map(el => ({ id: el.id, user: el.user }));
      }),
      catchError(error => {
        return throwError('Deu erro!');
      })
    )
    .subscribe((transformedData: { id: number, user: string }[]) => {
      this.select = transformedData;
    });
  }

  getDados(event) {
    if (event.keyCode === 13) {
      const params = new HttpParams().set('user', this.buscar);

      this.http.get<{ user: string; }[]>(this.url, { params })
      .pipe(
        map(data => {
          return data.map(el => ({ user: el.user }));
        }),
        catchError(error => {
          return throwError('Deu erro!');
        })
      )
      .subscribe((transformedData: { user: string }[]) => {
        this.list = transformedData;
        console.log(this.list[0].user);
        this.showUser.push({
          user: this.list[0].user
        });
        console.log(this.showUser);
      });
    }
  }
}

Любой отзыв на это решение приветствуется, и, пожалуйста, дайте мне знать, если у вас есть лучший. Спасибо.