Html OnInit列表未显示

我正在创建一个Angular6 crud应用程序，我的数据库中有一个用户列表。我可以在调用getAllUsers时检索列表，但它不会显示在UI中。我唯一一次看到表中显示的行是手动输入新用户，但它不显示输入之前的数据。我做错了什么

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

应用程序组件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))
  }

---

问题是，您不需要在完成之前的工作后，再次在AppComponent中将新用户订阅到此处的observable：

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

因为它已经通过以下方式添加到用户数组中：this.userDataService.addUseruser，这表示您向观察者插入了相同的值两次

因此，您需要做的是，在userdata服务中，将一个观察者插入rest api，该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);
  }

每当有新的值添加到用户库中，或从rest调用通过管道传输时，这将更新用户的状态，因此您不必从同一观察者多次订阅相同的值，这将导致数据重复

我找不到允许post调用的在线api，因此您可以使用自己的工具轻松地计算我上面所说的，但对于同一个域GET api服务，我在这里举了一个您可以看到的示例：

。

---

考虑到词汇量限制，将国家/地区作为用户。

TaskDataService从何处导入？我觉得有点不完整。您在控制台中是否收到任何错误消息？您是否可以显示userDataService.getAllUsers的代码？以及您的ts应用程序中的指令应用程序用户列表标题在哪里？添加的标题和用户数据服务。我删除了任务数据，因为它没有实现。这对我不起作用。更改后，我的新用户不会被列出。最初的问题仍然存在。我的json对象中有数据，但在页面加载Ngonit时，它不会显示数据。它只显示输入的数据。所以我很了解您，您想将用户两次注入到可观察和初始数组中吗？这将导致数据量减少？当我重新启动后端API时，我没有数据。然后在UI中，在标题输入中输入新用户User 1和User 2。这将用户存储在服务器中。重新加载UI时，用户1和用户2不再显示在表中。但是如果我输入User 3，它将显示id为3的User 3。这意味着用户1和用户2仍然存在，但它们不显示。我需要让用户1和用户2在UI重新加载时显示。@MSkiLLz数据启动良好，请再次参阅plz。您可以看到，user-data.service中先前存在的两个用户foo和bar以缩写形式存储在表中。如果你添加了一个新用户，网格中就会有更多的用户。我不知道你建议我做什么改变。根据您的回答，看起来您想让我更改应用程序组件中的newUser函数？但我认为问题出在我的getUsers函数中