css - Angular Material 中的可扩展行，带有 mat-row 指令

Question

嗨，我正在尝试实现类似于可扩展面板但带有mat-row指令的东西。我正在努力解决一些带有详细信息的面板始终可见且无法隐藏的 CSS 问题。此外，即使我隐藏了面板，也有一个额外的行 eveytime 可见。我的代码看起来像这样。

谁能帮我解决这个微妙的事情？

标签： cssangularangular-material

Answer 1

有点不清楚你的问题到底是什么，但我认为这就是你目前所缺少的：

1st：添加以下css类：

.hide-me {
  display:none;
}

然后你可以有条件地使用 ngClass 设置类：

[ngClass]="{'hide-me': expandedElement !== row}"

或者对于行：

<mat-row *matRowDef="let row; columns: ['expandedDetail']" 
    [ngClass]="{'hide-me': expandedElement !== row}" 
    class="example-detail-row"></mat-row>

它至少解决了一个明显的问题：