时间戳

首页 > 解决方案 > 如何以编程方式显示/隐藏材料表页脚？

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

问题描述

有没有办法使用@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什么？

标签： angularangular-material

解决方案

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

您可以使用ng-container：

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

推荐阅读