MEAN стек - возникают проблемы с отображением данных в таблице - PullRequest
Новая
       6

MEAN стек - возникают проблемы с отображением данных в таблице

0 голосов
/ 25 января 2020

Я пытаюсь создать веб-приложение MEAN. В настоящее время я пытаюсь создать таблицу, которая показывает список пользователей в моей базе данных, однако в настоящее время со следующим кодом я получаю только заголовки таблиц без данных. Может ли кто-нибудь помочь мне определить причину проблемы?

user-list.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>

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

1 Ответ

0 голосов
/ 25 января 2020

Похоже, вы подписываете тему (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() {
  }
}
...