如何以编程方式显示/隐藏材料表页脚？

Question

有没有办法使用@Input()变量显示/隐藏材料表页脚？我正在尝试构建一个自定义表格组件，它可能有也可能没有页脚，就像这样

<my-component [showFooter]="false"></my-component>

我想到的只是把一个最明显的事情*ngIf在mat-footer-row组件定义内。但是当我尝试使用

<tr *ngIf="showFooter" *matFooterRowDef="displayedColumns; sticky: true"></tr>

或者

<td *ngIf="showFooter" mat-footer-cell *matFooterCellDef>{{someValue}}</td>

我从编译器收到以下错误。

Can't have multiple template bindings on one element. Use only one attribute prefixed with *

如果我无法使用*ngIf.

Answer 1

我使用了隐藏属性，因此不需要额外的 CSS：

<tr mat-footer-row *matFooterRowDef="displayedColumns" [hidden]="!showFooter"></tr>

Answer 2

您只能在单个元素上使用一个结构指令（用 * 表示）。

您可以使用ng-container：

<ng-container *ngIf="showFooter">
  <td mat-footer-cell *matFooterCellDef>{{someValue}}</td>
</ng-container>

Answer 3

使用 CSS 和 的另一个选项mat-footer-row：

<tr mat-footer-row *matFooterRowDef="displayedColumns" [style.display]="showFooter ? 'table-row' : 'none'"></tr>