Angular中如何在mat-dialog展示表格列隐藏的额外lines数据

1. 组件逻辑改造（app.component.ts） #

首先导入依赖、注入MatDialog，实现数据转换方法和弹窗触发方法：

import { MatDialog } from '@angular/material/dialog';
import { LinesDialogComponent } from './lines-dialog/lines-dialog.component';

// 构造函数注入服务
constructor(private dialog: MatDialog) {}

// 把lines对象转为有序数组（按行号升序保证顺序正确）
getLinesArray(lines: Record<string, string>): string[] {
  return Object.keys(lines)
    .sort((a, b) => Number(a) - Number(b))
    .map(key => lines[key])
    .filter(line => line.trim() !== ''); // 可选：不需要过滤空行可删除该行
}

// 触发弹窗，传入全部lines数据
openDialog(lines: string[]): void {
  this.dialog.open(LinesDialogComponent, {
    width: '600px', // 可根据需求调整弹窗宽度
    data: { lines }
  });
}

2. 表格单元格展示改造（app.component.html） #

控制仅展示1行内容，超出显示提示文案，增加单行溢出样式：

<td 
  class="text-wrap text-single-line" 
  style="min-width: 100px; max-width:300px; cursor: pointer;"
  (click)="linesArray.length > 1 && openDialog(linesArray)"
>
  <ng-container *ngIf="linesArray = getLinesArray(scan.lines)">
    {{ linesArray[0] }}
    <span *ngIf="linesArray.length > 1">... 点击查看</span>
  </ng-container>
</td>

在app.component.css中增加单行展示样式：

.text-single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. 弹窗组件实现 #

首先通过Angular CLI创建弹窗组件：ng g c lines-dialog

弹窗组件逻辑（lines-dialog.component.ts） #

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-lines-dialog',
  templateUrl: './lines-dialog.component.html'
})
export class LinesDialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: { lines: string[] }) {}
}

弹窗模板（lines-dialog.component.html） #

<h2 mat-dialog-title>完整内容</h2>
<mat-dialog-content>
  <pre *ngFor="let line of data.lines">{{ line }}</pre>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>关闭</button>
</mat-dialog-actions>

依赖说明 #

需要提前在对应模块的imports数组中引入MatDialogModule，否则弹窗功能无法正常使用。

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