Angular Material数据表格在自定义模态框中无数据及表头显示问题

刚踩过类似的坑，我来帮你一步步排查可能的问题：

1. 先检查表格的模板结构是否完整 #

Angular Material的表格依赖特定的指令结构，少了任何一部分都可能导致表头或数据不显示。你的模板history.component.html里必须包含这些核心部分：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 定义每一列的模板 -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> 序号 </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

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

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

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

  <!-- 表头行（关键！没写的话表头完全不显示） -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <!-- 数据行（关键！没写的话数据行不渲染） -->
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

重点提醒：mat-header-row和mat-row这两行是渲染表头和数据行的核心，漏写的话表格直接是空的！

2. 确保dataSource正确初始化 #

你代码里dataSource =...没写完，这大概率是问题之一。不管是静态数据还是异步数据，都要给它一个有效的值：

静态数据示例： #

import { Component, OnInit } from "@angular/core";
import { MatTableDataSource } from '@angular/material/table'; // 用MatTableDataSource需要导入

@Component({
  selector: "app-history",
  templateUrl: "./history.component.html",
  styleUrls: ["./history.component.scss"]
})
export class HistoryComponent implements OnInit {
  displayedColumns = ["position", "name", "weight", "symbol"];
  // 直接用数组或者MatTableDataSource都可以
  dataSource = new MatTableDataSource([
    {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
    {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
    {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  ]);

  ngOnInit(): void {}
}

异步数据示例（比如从API获取）： #

// 假设你有一个数据服务
import { DataService } from '../data.service';
import { MatTableDataSource } from '@angular/material/table';

// ...
dataSource = new MatTableDataSource<any>([]);

constructor(private dataService: DataService) {}

ngOnInit(): void {
  this.dataService.getHistoryData().subscribe(data => {
    this.dataSource.data = data; // 数据返回后赋值给dataSource
  });
}

3. 检查模块是否正确导入 #

别忘了在你的模块（比如AppModule或者对应的feature模块）里导入Angular Material的相关模块，不然表格指令不会生效：

import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatDialogModule } from '@angular/material/dialog'; // 模态框必须的模块
import { HistoryComponent } from './history.component';

@NgModule({
  declarations: [HistoryComponent],
  imports: [
    // ...其他模块
    MatTableModule,
    MatDialogModule
  ]
})
export class YourModule { }

4. 排查模态框的样式问题 #

有时候模态框的容器样式会把表格挤没或者隐藏：

• 打开浏览器开发者工具，检查<table>、<tr mat-header-row>这些元素是否存在
• 查看是否有display: none或者overflow: hidden导致内容被截断
• 可以给表格加个临时的边框样式（比如border: 1px solid red），看看它是不是在模态框里

如果按照上面的步骤排查，应该就能解决表格为空的问题啦！

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