使用mat- *元素时如何使用可扩展的行示例修复此物料表

编程问答 2022-06-19

问题描述

我正在尝试应用相同的原理在“具有可扩展行的表” example中为我的表获取可扩展行。

我已经对表格的版本进行了类似的样式设置，但是无法正确显示表格的扩展部分。展开的详细信息不会展开相应的行，而只会在重叠的表格上方呈现。与我的版本的唯一区别是，我使用自定义mat-*元素创建表。

使用本地元素

<table mat-table ...>
  ...
  <tr mat-header-row *matHeaderRowDef="columnsTodisplay"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsTodisplay;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === element"
      (click)="expandedElement = expandedElement === element ? null : element">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

enter image description here

使用mat- *元素

<mat-table ...>
  ...
  <mat-header-row *matHeaderRowDef="columnsTodisplay"></mat-header-row>
  <mat-row *matRowDef="let element; columns: columnsTodisplay;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === element"
      (click)="expandedElement = expandedElement === element ? null : element">
  </mat-row>
  <mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></mat-row>
</mat-table>

enter image description here

据我了解，是mat-*元素的样式引起了问题。我肯定必须对样式进行一些调整才能解决某些问题，但是我不知道该怎么做才能完全解决该示例。

mat-table {
  width: 100%;
}

mat-row.example-detail-row {
  height: 0;
  min-height: initial; /* override mat-row styling */
}

mat-row.example-element-row:not(.example-expanded-row):hover {
  background: whitesmoke;
}

mat-row.example-element-row:not(.example-expanded-row):active {
  background: #efefef;
}

.example-element-row,/* override mat-row styling */
.example-element-row mat-cell {
  border-bottom-width: 0;
}

我该如何解决？

stackblitz

解决方法

您对mat-row.example-detail-row的规则将应用于所有mat-row元素。这导致您的expandedDetail行始终具有height: 0

我将example-detail-row类更改为hidden-detail，并将以下内容添加到模板的行中：

[class.hidden-detail]="expandedElement !== row"

它现在似乎正在按预期运行。

https://stackblitz.com/edit/angular-jxylk2-qvdfuq?file=src%2Fapp%2Ftable-expandable-rows-example.html

编辑：

对不起，忘记了这一部分。我相信造成这种情况的根本原因是默认情况下tr元素显示为table-row，而mat-row元素显示为flex。

,

事实证明，问题在于，由于<mat-row>元素使用flex，因此我需要使用flex-basis来设置明细行的初始高度，而不是使用height。这样，可以在内容更改时调整高度。

mat-row.example-detail-row {
  /* height: 0; */ /* no */
  flex-basis: 0; /* yes */
  min-height: initial; /* override mat-row styling */
}

updated stackblitz

angularangularangular-material2mat-table