angular - 如何以编程方式显示/隐藏 Material 表页脚？

Question

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

<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

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

您可以使用 ng-container :

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