加载表格时如何在角材料中隐藏空行？

如何解决加载表格时如何在角材料中隐藏空行？

当前端等待后端时，我试图在材料表上显示加载微调器。我这样做没有问题，问题是在此加载期间显示空行并且看起来不太好。

我正在使用此代码：

                    <tr class="mat-row" *matNoDaTarow>
                        <td class="mat-cell" [colSpan]="displayedColumns.length">
                            <ng-container *ngIf="!errorLoadingResults && !isLoadingResults">
                                No categories found.
                            </ng-container>
                            <ng-container *ngIf="errorLoadingResults && !isLoadingResults">
                                <span class="error_loading">
                                    There was an error getting the categories.
                                </span>
                            </ng-container>
                        </td>
                    </tr>

我的第一个想法是将整行封装在一个 ng-container 中：

<ng-container *ngIf="islloadingResults">
                        <tr class="mat-row" *matNoDaTarow>
                            <td class="mat-cell" [colSpan]="displayedColumns.length">
                                <ng-container *ngIf="!errorLoadingResults">
                                    No elements found.
                                </ng-container>
                                <ng-container *ngIf="errorLoadingResults">
                                    <span class="error_loading">
                                        There was an error getting the elements.
                                    </span>
                                </ng-container>
                            </td>
                        </tr>
                    </ng-container>

但是似乎该表根本没有加载 tr。 第一次尝试在加载微调器时呈现空行。当订阅者正在等待响应并且数据源仍然为空但我无法确认我收到错误或数据源是否为空时，如何在这么短的时间内解决此问题？：

解决方法

作为一个补丁，我不确定这是否是我添加一个类来隐藏它的正确方法，它似乎工作正常：

.empty-dataset__hidden{
  display: none;
}

然后在 html 中：

<tr class="mat-row" *matNoDataRow [ngClass]="{'empty-dataset__hidden': isLoadingResults}">
...
</tr>