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

【问题标题】：Material Table with Pagination and Rowspan not working带有分页和行跨度的材料表不起作用
【发布时间】：2021-10-26 01:51:58
【问题描述】：

我在使用行跨度对材料表进行分页时遇到问题。 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

【问题讨论】：

标签： angular angular-material mat-table paginator

【解决方案1】：

您可以使用 mat-paginator 作为组件（不添加 this.dataSource.paginator = this.paginator; 否则使用 mat-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
}

您可以在this stackblitz 中查看。看到直接用 dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);（数据不用转换

【讨论】：