Angular中能否使用mat-list绑定数据源展示DTO全量数据？

mat-list完全可以实现你要的效果，它支持和mat-table同源的DataSource数据接入模式，完全满足弹窗内全量渲染DTO列表数据的需求。

实现逻辑 #

和mat-table接DataSource的逻辑完全对齐，你不需要额外封装数据处理逻辑，直接复用Angular Material官方的DataSource抽象（包括你已经在mat-table里用过的MatTableDataSource）对接DTO数据即可，mat-list本身是无状态的展示容器，不会限制数据接入方式。

可直接落地的实现代码 #

• 前置依赖检查：确保你的组件所属模块（或独立组件的imports数组）已经引入MatListModule、MatDialogModule，如果用MatTableDataSource不需要额外引入其他依赖，这是@angular/material/table包内的通用类，和mat-table组件本身没有强绑定。
• 弹窗组件实现：

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatListModule } from '@angular/material/list';
import { MatTableDataSource } from '@angular/material/table';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';

// 替换成你自己的DTO类型
export interface CustomDto {
  id: string | number;
  label: string;
  value: any;
  [key: string]: any;
}

@Component({
  selector: 'app-dto-list-dialog',
  standalone: true,
  imports: [CommonModule, MatDialogModule, MatListModule, MatButtonModule],
  template: `
    <h2 mat-dialog-title>DTO数据列表</h2>
    <mat-dialog-content class="max-h-[500px] overflow-auto">
      <mat-list>
        <mat-list-item *ngFor="let item of dataSource.data" class="border-b py-2">
          <!-- 按需替换成你要展示的DTO字段 -->
          <span matListItemTitle>{{ item.label }}</span>
          <span matListItemLine>ID：{{ item.id }}</span>
        </mat-list-item>
      </mat-list>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button mat-stroked-button mat-dialog-close>关闭</button>
    </mat-dialog-actions>
  `
})
export class DtoListDialogComponent {
  dataSource = new MatTableDataSource<CustomDto>();
  constructor(@Inject(MAT_DIALOG_DATA) fullDtoData: CustomDto[]) {
    // 和mat-table赋值datasource的逻辑完全一致
    this.dataSource.data = fullDtoData;
  }
}

• 弹窗调用方式：

// 在需要触发弹窗的业务组件中
import { MatDialog } from '@angular/material/dialog';
// 引入上面写的弹窗组件和DTO类型

export class YourBusinessComponent {
  constructor(private dialog: MatDialog) {}

  openDtoListDialog() {
    // 替换成你实际拿到的全量DTO数据
    const yourDtoList: CustomDto[] = [];
    this.dialog.open(DtoListDialogComponent, {
      width: '600px',
      data: yourDtoList
    });
  }
}

之前写法失效的常见排查点 #

• 未正确引入MatListModule，导致模板里的mat-list、mat-list-item指令无法被识别
• 模板循环时绑定错误，直接遍历了DataSource实例而非实例上的data属性，导致拿不到渲染数据
• 调用弹窗时未通过data参数传入DTO数组，导致数据源初始化后为空
• 未给弹窗内容区加滚动限制，数据量过大时出现样式异常，误以为列表未渲染

如果你后续需要给列表加过滤、排序、分页能力，MatTableDataSource自带的filter、sort、paginator属性在这个场景下完全可以正常使用，和mat-table的配置方式没有区别。

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