Question

我尝试显示对象列表（用户在这里，但我需要显示许多其他类型），并且当我尝试按照教程进行操作时，它在屏幕上什么也不显示。

当我从Github启动完整的教程时，它会起作用。

我该怎么办？

这是我的代码。如果您还需要其他东西，请告诉我。

我在 Angular 7 中工作。

UserListComponent

import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import {UserService} from "../core/user.service";
import {User} from "../model/user.model";
export class UserListComponent implements OnInit {

  users: User[];

  constructor(private router: Router, private userService: UserService) { }

  ngOnInit() {
    this.userService.getUsers()
      .subscribe( data => {
        this.users = data;
      });
  }
}

UserService

@Injectable()
export class UserService {
  constructor(private http: HttpClient) { }
  baseUrl: string = 'http://localhost:8080/api/user';

  getUsers() {
    return this.http.get<User[]>(this.baseUrl);
  }
}

user-list.component.html

<div class="col-md-6">
  <h2> User Details</h2>
  <table class="table table-striped">
    <thead>
    <tr>
      <th>Id</th>
      <th>Email</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let user of users">
      <td>{{user.id}}</td>
      <td>{{user.email}}</td>
    </tr>
    </tbody>
  </table>
</div>

当我alert(data[0].mail)收到正确的邮件时，但是当我尝试显示该邮件时，用户仍然为空

Answer 1

您正在异步接收用户。因此，当页面首次呈现时，用户还不存在。（弹出窗口将显示在屏幕上，所以他们会显示）

您需要对页面使用异步方法，以了解数据将在首次渲染并重新渲染之后更新。

export class UserListComponent implements OnInit {

  users$: Observable<Users>; // Using Observable

  constructor(private router: Router, private userService: UserService) { }

  ngOnInit() {
    this.users = this.userService.getUsers()
  }
}

如您所见，我正在使用 Observable 道具。这将在每次更改时通知。

<div class="col-md-6">
  <h2> User Details</h2>
  <table class="table table-striped">
    <thead>
    <tr>
      <th>Id</th>
      <th>Email</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let user of users$ | async">
      <td>{{user.id}}</td>
      <td>{{user.email}}</td>
    </tr>
    </tbody>
  </table>
</div>

并通过 |在HTML文件中指定async 表示此道具是异步的，并且将要更新。

异步管道： https://angular.io/api/common/AsyncPipe

可观察对象： https://angular.io/guide/observables

Angular服务数据未显示

1 个答案: