如何将Angular表格行转换为mat-card网格布局？

核心复用数据 #

直接复用你原表格中用来遍历的element数组数据源（就是表格*ngFor绑定的那个数组，比如dataSource），所有卡片的内容都从这个数组里取。

具体实现步骤 #

• 移除原表格的<table>/<mat-table>相关标签，替换为卡片容器
• 用*ngFor遍历数据源数组，每个元素对应一张卡片，把element.abbr作为卡片标题：

  <!-- 示例：Grid布局的卡片容器 -->
  <div class="card-container">
    <mat-card *ngFor="let element of dataSource">
      <mat-card-header>
        <mat-card-title>{{element.abbr}}</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <!-- 按需展示element的其他字段，对应原表格列内容 -->
        <p>名称：{{element.name}}</p>
        <p>描述：{{element.description}}</p>
      </mat-card-content>
    </mat-card>
  </div>
  

• 保留原有分页逻辑：原分页组件（如mat-paginator）可直接复用，分页控制的是数据源的分页数据，和展示形式无关，只需保持原绑定逻辑不变。
• 添加网格布局样式：

  .card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 1rem;
  }
  

关键提示 #

• 无需修改数据获取、分页的业务逻辑，只替换视图层的展示结构即可
• 如果使用Angular Material，mat-card组件能和原有UI风格无缝统一
• 卡片内可自由组合element的其他字段，完全对应原表格中你需要展示的内容

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