使用 mat-* 元素时如何使用可扩展行示例修复此 material table

Question

我正在尝试应用相同的原则为我的 table 在“Table with expandable rows”example.

中获取可扩展行

我已经为我的 table 版本设置了类似的样式，但无法正确呈现 table 的扩展部分。展开的详细信息不会展开相应的行，它只是呈现在 table 重叠的顶部。与我的版本唯一不同的是，我使用自定义 mat-* 元素来创建 tables.

使用原生元素

<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>

使用 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>

据我了解，导致问题的是 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

Answer 1

您对 mat-row.example-detail-row 的规则将应用于所有 mat-row 元素。这导致你的 expandedDetail 行总是有一个 height: 0

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

[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.

Answer 2

原来问题是因为<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

使用 mat-* 元素时如何使用可扩展行示例修复此 material table

How to fix this material table with expandable row example when using mat-* elements

angular-material2

angular

mat-table