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

Question

是否有一种使用broker.xml变量来显示/隐藏物料表页脚的方法？我正在尝试构建一个自定义表组件，它可能具有或可能不具有页脚，像这样

@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 * 实现此目标，正确的方法是什么？

Answer 1

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

您可以使用ng-container：

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

Answer 2

您可以使用CSS隐藏它：

.mat-table {

  tfoot {
    display: none;
  }

  &.footer-visible {
    tfoot {
      display: table-footer-group;
    }
  }
}

然后在表格内

<table mat-table [class.footer-visible]="false">
...

Answer 3

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

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