logo标签列表

当数据正在加载时，隐藏mat-table中的mat-rows。

angularangular-material
7

我正在尝试在MatTable加载时隐藏其行。

我不能这样做：（请参见StackBlitz获取完整代码）

<div *ngIf="!isLoading">
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</div>

作为 MatTable 会抛出各种错误 :(
我不能将 *ngIf="!isLoading" 放在 MatRow 中，因为它已经有一个结构指令。
我想避免 CSS 技巧。
我看不到什么？请启发我。
7个回答
13

所以，"技巧"就是使用[hidden]

<tr mat-row *matRowDef="let row; columns: displayedColumns;" [hidden]="isLoading"></tr>

然而，我最终没有采用这种解决方案，因为它会使表格"抖动"。相反，我选择在表格页脚放置一个旋转器。

3
不起作用。 - Amirhossein Mehrvarzi
5

一个元素上不能同时使用两个结构型指令，请使用 ng-container

<ng-container *ngIf="!isLoading">
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

<ng-container>
2
这更像样了 :) 但是MatTable并不喜欢它。我已经在StackBlitz上更新了更改 https://stackblitz.com/edit/angular-mw8kah - Snæbjørn
1
你可以使用ng-container。
<table mat-table [dataSource]="dataSource">
  ...
  <ng-container *ngIf="!isLoading">
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </ng-container>
  ...
</table>
这里的材料有点不灵活，在这种情况下会出现“rowDef未定义”的错误提示。 - judos
1
我会删除有关加载时间的数据。没有任何欺骗。
这是我现在正在做的“权宜之计”。然而，我不喜欢它，因为它赋予了datasource显示责任，而它根本不应该关心。 - Snæbjørn
这就是正确的方式。没有必要把简单的事情搞得过于复杂。 - Antoniossss
0

尝试做这个：

<div class="course">

    <div class="spinner-container" *ngIf="dataSource.loading$ | async">
        <mat-spinner></mat-spinner>
    </div>

    <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
        ....
    </mat-table>
</div>

它还会在数据加载时添加一个漂亮的旋转器。
虽然这是一个解决方案，但它并没有完全解决所述问题。 - Snæbjørn
@Snæbjørn 那么也许只需要 <table mat-table *ngIf="!dataSource.loading$">？ - Chris K
这会隐藏表头，导致视图看起来很奇怪。你期望加载的内容应该在表格内部，而不是完全删除它。 - Snæbjørn
0

所以答案就是建议的那样，但是你需要添加CSS来使其工作。

所以“诀窍”是使用[hidden]。

然而，我最终没有使用这个解决方案，因为它使表格“跳动”。相反，我选择在表格页脚中放置一个旋转器。

mat-row[hidden] { display: none !important; }

0
您可以使用isLoading标志来控制您的displayedColumns。
get displayedColumns() {
  return this.isLoading ? [] : ['position', 'name', 'weight', 'symbol'];
}

你的模板将会变得简单，并且易于测试。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接