Question

我想使用mat-table来显示使用Spring RestAPI从数据库中调用的用户列表，但是即使遵循了许多教程，该表也只显示标题（列名），并且当我检查控制台时它显示了用户列表。

这是我的html组件：

<div class="container-scroller">
  <app-navbar></app-navbar>
  <div class="container-fluid page-body-wrapper">
    <app-sidebar></app-sidebar>
    <div class="main-panel">
      <div class="content-wrapper">
        <div class="row">
          <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
              <div class="card-body">
                <h4 class="card-title" style="font-weight: 600">Users List</h4>
                <div class="table-responsive">  
                  <table mat-table [dataSource]="dataSource">
                    <ng-container matColumnDef="id">
                      <th mat-header-cell *matHeaderCellDef> ID </th>
                      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
                    </ng-container>

                    <ng-container matColumnDef="userName">
                      <th mat-header-cell *matHeaderCellDef> Username </th>
                      <td mat-cell *matCellDef="let element"> {{element.username}} </td>
                    </ng-container>

                    <ng-container matColumnDef="firstName">
                      <th mat-header-cell *matHeaderCellDef> firstName </th>
                      <td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
                    </ng-container>

                    <ng-container matColumnDef="lastName">
                      <th mat-header-cell *matHeaderCellDef> Last Name </th>
                      <td mat-cell *matCellDef="let element"> {{element.LastName}} </td>
                    </ng-container>

                    <ng-container matColumnDef="email">
                      <th mat-header-cell *matHeaderCellDef> Email </th>
                      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
                    </ng-container>

                    <ng-container matColumnDef="registeredDate">
                      <th mat-header-cell *matHeaderCellDef> Registered Date </th>
                      <td mat-cell *matCellDef="let element"> {{element.registeredDate | date: shortDate}} </td>
                    </ng-container>

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

.ts文件：

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { UserService } from '../user.service';
import { MatTableDataSource } from '@angular/material';
import { User } from '../user';

@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['../app.component.scss', './dashboard.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit {
  loginuser: any = {};
  user: User[] = [];
  displayedColumns: string[] = ['id', 'userName', 'firstName', 'lastName', 'email', 'registeredDate'];
  public datasource = new MatTableDataSource<User>();
  constructor(private service: UserService) {}

  ngOnInit() {
      this.loginuser = JSON.parse(localStorage.getItem('currentUser'));
      this.getALLUSERS(this.loginuser.token);
  }

  public getALLUSERS(token: any) {
      this.service.getAllUsers(token).subscribe(u => {
      this.datasource.filteredData = u as User[];
      console.log('datasource: ', this.datasource.filteredData);
  });
  }

  onClick(selectedItem) {
      console.log('selected item: ', selectedItem);
  }
}

用户界面：

export interface User {
   id: number;
   username: string;
   firstname: string;
   lastname: string;
   email: string;
   registereddate: Date;
}

Answer 1

您应该更新data而不是数据源的filteredData。

this.datasource.data = u;

即使正在记录数据，Mat-Table也不显示任何内容（console.log）

1 个答案: