OnInit список не отображается

Question

Я создаю приложение Angular6 crud, и у меня есть список пользователей в моей базе данных.Я могу получить свой список при вызове getAllUsers, но он не отображается в пользовательском интерфейсе.Единственный раз, когда я вижу строку, отображаемую в таблице, это когда я вручную ввожу нового пользователя, но он не отображает данные, предшествующие моей записи.Что я делаю неправильно?

import { Component, OnInit } from '@angular/core';
import { UserDataService } from './user-data.service';
import { User } from './user';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [UserDataService]
})
export class AppComponent implements OnInit{

  users: User[]=[];

  constructor(private userDataService: UserDataService) {}

  public ngOnInit() {
    debugger
      this.userDataService
        .getAllUsers()
        .subscribe(
          (users) => {
            this.users = users;
          }
        );

  }

  onAddUser(user) {
    this.userDataService
      .addUser(user)
      .subscribe(
        (newUser) => {
          this.users = this.users.concat(newUser);
        }
      )
  }

  onRemoveUser(user){
    this.userDataService
      .deleteUserById(user.id)
      .subscribe(
        (_) => {
          this.users = this.users.filter((u) => u.id !== user.id);
        }
      );
  }

  getUser() {
    return this.userDataService.getAllUsers();
  }
}

КОМПОНЕНТ APP HTML

  <app-user-list-header (add)="onAddUser($event)"></app-user-list-header>


  <table>
    <th>ID</th>
    <th>NAME</th>
    <tr *ngFor = "let user of users">
      <td>{{user.id}}</td>
      <td>{{user.userName}}</td>
    </tr>
</table>

ОБСЛУЖИВАНИЕ ДАННЫХ ПОЛЬЗОВАТЕЛЯ

import { Injectable } from '@angular/core';
import { User } from './user';
import { ApiService } from './api.service';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserDataService {

  constructor(private api: ApiService) { }

  addUser(user: User): Observable<User> {
    return this.api.createUser(user);
  }

  getAllUsers(): Observable<User[]> {
    return this.api.getAllUsers();
  }

  updateUser(user: User): Observable<User> {
    return this.api.updateUser(user);
  }

  getUserById(userId: number): Observable<User> {
    return this.api.getUserById(userId);
  }

  deleteUserById(userId: number): Observable<User> {
    return this.api.deleteUserById(userId);
  }
}

ЗАГОЛОВОК СПИСКА ПОЛЬЗОВАТЕЛЕЙ

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { User } from '../user';


@Component({
  selector: 'app-user-list-header',
  templateUrl: './user-list-header.component.html',
  styleUrls: ['./user-list-header.component.css']
})
export class UserListHeaderComponent implements OnInit {

  newUser: User = new User();

  @Output()
  add: EventEmitter<User> = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  addUser() {
    this.add.emit(this.newUser);
    this.newUser = new User();
  }
}

ЗАГОЛОВОК СПИСКА ПОЛЬЗОВАТЕЛЕЙ HTML

<header class="userHeader">
    <h1>Users</h1>
    <input class="new-user" placeholder="Enter User" autofocus="" [(ngModel)]="newUser.userName" (keyup.enter)="addUser()">
</header>

API СЕРВИС

    import { Injectable } from '@angular/core';
    import { environment } from '../environments/environment';

    import { User } from './user';
    import { Http } from '@angular/http';
    import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
    import { Observable } from 'rxjs';
    import { map, catchError } from "rxjs/operators";


const API_URL = environment.apiUrl;

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) {

  }

  public createUser(user: User): Observable<User> {
    const headers = {headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })};
    return this.http
     .post(API_URL + '/users', user).pipe(
        map(response => {
          return new User(response);
        }), catchError(this.handleError)
      )
  }

  public getAllUsers(): Observable<User[]> {
    return this.http
      .get(API_URL + '/users').pipe(
      map(response => {
        var users = [response];
        return users.map((user)=> new User(user));
      }), catchError(this.handleError))
  }

Answer 1

Проблема в том, что вам не нужно снова назначать нового пользователя для наблюдаемого здесь в AppComponent после того, как вы сделали это раньше:

   .subscribe(
     (newUser) => {
        this.users = this.users.concat(newUser);
     }
   ) 

потому что он уже добавлен в пользовательский массив следующим образом: this.userDataService.addUser(user), что говорит о том, что вы дважды вставили одно и то же значение в наблюдатель.

Итак, в сервисе пользовательских данных подключите наблюдатель к остальному API, который регулярно получает данные в адаптер getAllUsers, например:

  getAllUsers(): Observable<user[]> {
    // some intermediate post call happens here
    this.api.getAllUsers().subscribe((users) => users.map((user)=>this.users.push(user)));
    return of(this.users);
  }

Это будет обновлять состояние пользователей всякий раз, когда новое значение добавляется в базу пользователей или передается из остального вызова, поэтому вы никогда не должны указывать одно и то же значение более одного раза от одного и того же наблюдателя, это приведет к дублированию данных.

Мне не удалось найти API-интерфейс онлайн, позволяющий отправлять вызовы, поэтому вы можете легко понять, что я сказал выше, используя ваши собственные инструменты, но для службы GET API того же домена я сделал пример в этом термине видимым на ваш взгляд здесь:

https://stackblitz.com/edit/angular-rndqsd. Принимая страны в качестве пользователей ради словарного запаса.