Angular 12 数据表格初始化无数据，仅触发模态框后才显示问题求助

问题核心原因 #

1. 缺少初始化拉取全量员工列表的逻辑
   你前端表格通过*ngFor绑定的是employees数组，但目前贴出的代码中只有查询单个员工的getEmployee方法，没有调用后端暴露的全量查询接口（list/getAllEmployee）拉取所有员工数据、赋值给employees数组的逻辑。
2. 临时代码和点击编辑能触发渲染的本质是触发了Angular变更检测
   你添加this.getEmployee(1)、或者点击编辑按钮触发请求时，Angular内置的HttpClient会在请求响应后触发全局变更检测，如果你有其他未贴出的代码已经为employees数组赋过值，这时候变更检测会识别到数据变化，完成表格渲染。这只是巧合的触发条件，不是正确的实现逻辑。

解决步骤 #

步骤1：补充全量员工数据拉取方法

在menu.component.ts中新增调用全量接口的方法，注意请求路径要和后端接口路由保持一致：

// 此处假设后端全量接口路由为/employee/list，可根据实际后端配置调整
loadAllEmployees(): void {
  this.httpClient.get<any[]>('http://localhost:8080/employee/list').subscribe(res => {
    this.employees = res;
  })
}

步骤2：在初始化钩子中调用全量拉取方法

替换原来的临时代码，在ngOnInit中调用上述方法即可：

ngOnInit(): void {
  // 删除原来的this.getEmployee(1)临时代码，替换为下面的逻辑
  this.loadAllEmployees();
}

可选兼容方案：数据拉取后仍不渲染的处理

如果存在异步操作在Angular Zone外执行的场景，可通过ChangeDetectorRef手动通知视图更新：
首先在构造函数中注入变更检测器：

import { ChangeDetectorRef } from '@angular/core';

constructor(
  private httpClient: HttpClient,
  private cdr: ChangeDetectorRef
) {}

然后在全量拉取的回调中补充变更检测触发逻辑：

loadAllEmployees(): void {
  this.httpClient.get<any[]>('http://localhost:8080/employee/list').subscribe(res => {
    this.employees = res;
    this.cdr.markForCheck();
  })
}

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