Данные угловых услуг не отображаются - PullRequest
Новая
       49

Данные угловых услуг не отображаются

0 голосов
/ 09 февраля 2019

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

Принимая во внимание, когдаЯ запускаю полностью собранные учебники от 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) имею правильную почту, но пользователи остаются пустыми, когда я пытаюсьпокажи

1 Ответ

0 голосов
/ 09 февраля 2019

Вы принимаете пользователей асинхронно .Таким образом, когда страница впервые отображается, пользователей еще нет.(После этого появится всплывающее окно, поэтому они будут отображаться)

Вам необходимо использовать асинхронный метод для страницы, чтобы знать, что данные будут обновлены после первого рендеринга, и повторно рендерить . 

export class UserListComponent implements OnInit {

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

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

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

Как видите, я использую Observable prop.Он будет уведомлять каждый раз, когда он изменится. 

<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 через |асинхронный канал, который этот объект является асинхронным и собирается обновить.

асинхронный канал: https://angular.io/api/common/AsyncPipe

Наблюдаемые: https://angular.io/guide/observables

...