在mat-对话框中显示mat-表

import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';

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

@Component({
  selector: 'app-dialog-example',
  template: `
    <button mat-button (click)="openDialog()">打开对话框</button>
  `,
})
export class DialogExampleComponent {
  constructor(public dialog: MatDialog) {}

  openDialog() {
    const dialogRef = this.dialog.open(DialogContentComponent);
  }
}

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

@Component({
  selector: 'app-dialog-content',
  template: `
    <h2 mat-dialog-title>示例对话框</h2>
    <mat-dialog-content>
      <table mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="column1">
          <th mat-header-cell *matHeaderCellDef>列1</th>
          <td mat-cell *matCellDef="let element">{{element.column1}}</td>
        </ng-container>

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

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button mat-dialog-close>关闭</button>
    </mat-dialog-actions>
  `,
})
export class DialogContentComponent {
  displayedColumns: string[] = ['column1', 'column2'];
  dataSource = new MatTableDataSource([{ column1: '数据1', column2: '数据2' }]);
}

import { Component } from '@angular/core';
import { MatDialogModule } from '@angular/material/dialog';

@Component({
  selector: 'app-root',
  template: `
    <app-dialog-example></app-dialog-example>
  `,
})
export class AppComponent {}