时间戳

首页 > 解决方案 > 带有分页和行跨度的材料表不起作用

angular - 带有分页和行跨度的材料表不起作用

问题描述

我在使用行跨度对材料表进行分页时遇到问题。rowspan 属性绑定本身就可以正常工作。但是当我引入分页时，它会导致值的重复。例如 id=5 的数据

{ id: 5, name: 'Boron', weight: 10.811, descriptions: ['row1'] },

输出看起来像

在此处输入图像描述

有什么办法可以避免这种情况吗？

请在此处找到 stackblitz 链接https://stackblitz.com/edit/angular-wudscb-9us1us?file=app%2Fapp.component.html

标签： angularangular-materialmat-tablepaginator

解决方案

您可以使用 mat-paginator 作为组件（不添加else 使用mat-paginatorthis.dataSource.paginator = this.paginator;的事件和属性

但我建议你真的“按原样”显示表格。唯一的是“格式化”最后一个单元格

  <ng-container matColumnDef="descriptions">
    <th mat-header-cell *matHeaderCellDef>Descriptions</th>
    <td mat-cell class="description-cell" *matCellDef="let data" >
      <div class="inner-cell" *ngFor="let desc of data.descriptions;let last=last" 
           [class.no-border]="last" >
        {{ desc }}
      </div>
    </td>
  </ng-container>

并调整 .css

td.mat-cell.description-cell{
  padding:0!important
}
.inner-cell{
padding-top: 14px !important;
padding-left: 16px !important;
padding-bottom: 14px !important;

border-bottom:1px solid rgba(0,0,0,.12);
}
.no-border{
  border-bottom:none
}

你可以在这个 stackblitz中看到。看到它是直接使用的 dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);（你不需要转换你的数据

推荐阅读