MEAN 堆栈 - 在表格中显示数据时遇到问题

Question

我正在尝试创建一个 MEAN 网络应用程序。目前，我正在尝试创建一个显示数据库中用户列表的表，但是目前使用以下代码我只收到没有数据的表头。谁能帮我确定可能导致问题的原因？

用户列表.component.html：

<div class="example-container"class="mat-elevation-z2">

  <table mat-table [dataSource]="dataSource" matSort>

    <!-- Position Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> id </th>
      <td mat-cell contenteditable="true" *matCellDef="let users"> {{ users.id }} </td>
    </ng-container>

    <!-- Position Column -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
      <td mat-cell *matCellDef="let users"> {{ users.email }} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="password">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Password </th>
      <td mat-cell *matCellDef="let users"> {{ users.password }} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

用户列表.component.ts：

import { Component, OnInit, ViewChild } from "@angular/core";
import { MatTableDataSource } from '@angular/material';

import { User } from "./user.model";
import { UsersService } from "./user.service";

@Component({
  selector: 'user-list.component',
  styleUrls: ['user-list.component.css'],
  templateUrl: 'user-list.component.html',  })

export class UserListReport implements OnInit {
  users: any = [];
  dataSource: MatTableDataSource<User>;
  displayedColumns: string[] = ['id', 'email', 'password'];


  constructor(private usersService: UsersService) {
    this.usersService.getUsers();
    this.usersService.getUserUpdateListener()
    .subscribe((users: User[]) => {
      this.users = users;
      this.dataSource = new MatTableDataSource<User>(this.users);
      setTimeout(() => {
      }, 0);
    })    
  }
  ngOnInit() {
  }
}

user.service.ts:

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Subject } from "rxjs";
import { map } from "rxjs/operators";
import { Router } from "@angular/router";

import { User } from "./user.model";

@Injectable({ providedIn: "root" })
export class UsersService {
  private users: User[] = [];
  private usersUpdated = new Subject<User[]>();

  constructor(private http: HttpClient, private router: Router) {}

  getUsers() {
    this.http
      .get<{ message: string; users: any }>("http://3.135.49.44:8080/api/user")
      .pipe(
        map(userData => {
          return userData.users.map(user => {
            return {
              email: user.email,
              password: user.password,
              id: user._id
            };
          });
        })
      )
      .subscribe(transformedUsers => {
        this.users = transformedUsers;
        this.usersUpdated.next([...this.users]);
      });
  }
  getUserUpdateListener() {
    return this.usersUpdated.asObservable();
  }

Answer 1

看来您订阅主题(usersUpdated) 太晚了，您可以更改函数执行顺序以获取正确的数据。

@Component({
  ...

export class UserListReport implements OnInit {
  ...


  constructor(private usersService: UsersService) {
    // this.usersService.getUsers();
    this.usersService.getUserUpdateListener()
    .subscribe((users: User[]) => {
      this.users = users;
      this.dataSource = new MatTableDataSource<User>(this.users);
      setTimeout(() => {
      }, 0);
    })  
    // trigger getUser function after getUserUpdateListener has been subscribed
    this.usersService.getUsers();
  }
  ngOnInit() {
  }
}