时间戳

首页 > 解决方案 > 角材料 - 垫表动态页脚/标题 rowDef

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

问题描述

我正在尝试有条件地显示footer-row我的垫子表。

基于这个讨论，我知道不知何故，我必须用removeFooterRowDef它来删除它，我猜addFooterRowDef还是setFooterRowDef带来另一个。

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

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

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

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

标签： angularangular-materialmat-table

解决方案

根据这个问题的答案，我发现它与viewChild模板中的like结合使用，有

<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，我猜。

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

推荐阅读