Angular Material表格ngOnInit不显示数据，刷新后正常求助

嘿，我来帮你捋清楚这个问题——核心原因是异步请求的时序错误，导致组件初始化时根本拿不到真实数据，刷新后能显示大概率是因为浏览器缓存了接口响应，或者服务端响应变快让数据在组件初始化前就加载完成了。咱们一步步来修复：

问题根源拆解 #

你的UserService.getUserList()方法里，发起HTTP请求后立刻返回了this.userList，但这时候接口请求还在pending状态，this.userList还是空数组。等请求完成后给this.userList赋值时，组件已经走完ngOnInit了，而且因为数据源没有重新初始化，Angular的变更检测也没触发表格更新。

第一步：修复UserService的异步逻辑 #

让getUserList()返回一个Promise，确保数据加载完成后再把结果传给组件：

// UserService 修复后代码
getUserList(): Promise<User[]> {
  const headers = new Headers({'Content-Type': 'application/json', 'Authorization': 'Bearer ' + this.authenticationService.token});
  const options = new RequestOptions({ headers: headers });
  
  // 直接返回请求的Promise，并在then里保存数据同时返回结果
  return this.http.get('/api/getallusers/', options)
    .map((data: Response) => data.json() as User[])
    .toPromise()
    .then(userData => {
      this.userList = userData;
      return userData; // 把获取到的用户数据返回给组件
    });
}

第二步：修改组件的初始化逻辑 #

在ngOnInit里等待异步请求完成后，再初始化表格数据源：

// UsersComponent 修复后代码
import { ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator'; // 新增分页器导入
import { ChangeDetectorRef } from '@angular/core';
import { UserService } from './user.service';

export class UsersComponent implements OnInit {
  @ViewChild('paginator') paginator: MatPaginator; // 关联模板里的分页器
  constructor(private ref: ChangeDetectorRef, private userService: UserService){}
  
  displayedColumns = ['ID', 'FirstName', 'Phone', 'LastName'];
  dataSource: MatTableDataSource<User>;
  users: User[] = [];

  ngOnInit() {
    // 等待接口返回数据后再初始化数据源
    this.userService.getUserList().then(users => {
      this.users = users;
      this.dataSource = new MatTableDataSource(this.users);
      this.dataSource.paginator = this.paginator; // 绑定分页器
      // 这里不需要手动调用detectChanges，Angular在异步回调里会自动触发变更检测
    });
  }
}

第三步：补全模板里的列定义 #

你组件里的displayedColumns包含了ID和FirstName，但模板里只定义了Phone和LastName，这会导致表格渲染异常，必须补上对应列：

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">
    <!-- 新增ID列定义 -->
    <ng-container matColumnDef="ID">
      <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{ user.id }} </mat-cell>
    </ng-container>
    <!-- 新增FirstName列定义 -->
    <ng-container matColumnDef="FirstName">
      <mat-header-cell *matHeaderCellDef> FirstName </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{ user.firstname }} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="Phone">
      <mat-header-cell *matHeaderCellDef> Phone </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{ user.phone }} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="LastName">
      <mat-header-cell *matHeaderCellDef> LastName </mat-header-cell>
      <mat-cell *matCellDef="let user" > {{ user.lastname}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let user; columns: displayedColumns;"></mat-row>
  </mat-table>
  <!-- 给分页器加模板引用变量，方便组件绑定 -->
  <mat-paginator #paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

额外注意点 #

1. 如果你的组件用了OnPush变更检测策略，可能需要手动调用this.ref.markForCheck()，但默认策略下异步回调会自动触发变更检测，不需要额外操作。
2. 分页器必须和数据源绑定才能生效，否则分页功能会失效。

内容的提问来源于stack exchange，提问作者Narendar