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

Posted 2023-03-24

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

【英文标题】：MEAN stack - having trouble displaying data in table

【发布时间】：2020-05-11 06:48:09

【问题描述】：

我正在尝试创建一个 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();
  

【参考方案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() 
  

【讨论】：

谢谢，但似乎仍然没有解决问题。我仍然没有收到数据表中的数据

我为你创建了一个online example。您可以比较与您的代码不同的地方

感谢您花时间创建示例。不过，我似乎仍然无法将数据拉到表格中。我们的 user-list.component.html 和 user-list.component.ts 的代码是一模一样的，所以我猜应该是服务代码吧？

是的，您必须确保从 API(3.135.49.44:8080/api/user) 获取的数据是正确的数据结构。也许这有一些错误。

当我直接在浏览器中使用该网址时，它会列出所有用户，因此错误一定是在将数据传输到表单时。有任何想法吗？再次感谢您的帮助。