角材料 - 垫表动态页脚/标题 rowDef

Question

我正在尝试有条件地显示我的 mat-table 的 footer-row。

基于this discussion，我知道不知何故，我必须使用removeFooterRowDef 来删除它，我猜想addFooterRowDef 或setFooterRowDef 带来另一个。

但我找不到关于如何使用其中之一的正确解释。

请注意，我已尝试将页脚行包装在 ng-container 中。

<ng-container *ngIf="hasFooter">
    <tr mat-footer-row *matFooterRowDef="footerRowDef"></tr>
<ng-container>

但即使hasFooter 为假，该行仍然存在。

Answer 1

根据this question上的答案，我发现它与模板中的viewChild结合使用，有

<ng-container>
    <tr *matFooterRowDef="columns" mat-footer-row></tr>
</ng-container>

在组件类中

@ViewChild(MatFooterRowDef, {static: true}) footerDef: MatFooterRowDef;
@ViewChild(MatTable, {static: true}) table: MatTable;

removeFooter() {
    this.table.removeFooterRowDef(this.footerDef);
}

addFooter() {
    this.table.setFooterRowDef(this.footerDef);
}

要添加新页脚，我们会调用 addFooterRowDef，但我会调用 setFooterRowDef 来覆盖任何现有的页脚。

rowDef 和 headerRowDef 的所有其他方法都以相同的方式工作。我猜还有columnDef。

如果有人需要，我把它留在这里。