Скрыть строки матов в таблице матов при загрузке данных
Я пытаюсь скрыть строки MatTable при его загрузке.
Я не могу этого сделать: (весь код см. В StackBlitz)
<div *ngIf = "!isLoading">
<tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
</div>
поскольку MatTable выдаст всевозможные ошибки :(
Я не могу поместить *ngIf = "!isLoading" внутрь MatRow, поскольку в нем уже есть структурная директива.
Я бы хотел избежать обмана с помощью CSS.
Что я не вижу? Просвети меня, пожалуйста.
Ответы 7
Попробуйте сделать это:
<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, может, просто <table mat-table *ngIf = "!dataSource.loading$">?
это скроет заголовки таблицы, что приведет к странному виду. Вы ожидаете, что загружаемый объект находится внутри таблицы, а не удалит его полностью
Я бы удалил данные о времени загрузки. Никаких уловок.
Это то, что я делаю сейчас в качестве «обходного пути». Однако мне это не нравится, так как это дает datasource ответственность за отображение, о которой он не должен заботиться.
И это путь. Не нужно усложнять простые вещи.
Нельзя использовать две структурные директивы для одного элемента. использовать ng-container
<ng-container *ngIf = "!isLoading">
<tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
<ng-container>
Это больше похоже на это :) Однако MatTable это не нравится. Я обновил StackBlitz с изменениями stackblitz.com/edit/angular-mw8kah
Можно использовать ng-container
<table mat-table [dataSource] = "dataSource">
...
<ng-container *ngIf = "!isLoading">
<tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
</ng-container>
...
</table>
Материал здесь немного негибкий и в этом случае жалуется на "rowDef is undefined"
Итак, "уловка" заключалась в использовании [hidden].
<tr mat-row *matRowDef = "let row; columns: displayedColumns;" [hidden] = "isLoading"></tr>
Однако я не стал использовать это решение, так как оно сделало таблицу «нервной». Вместо этого я решил поставить счетчик в нижний колонтитул таблицы.
Это не действует.
Вы можете управлять отображаемыми столбцами с помощью флага isLoading.
get displayedColumns() {
return this.isLoading ? [] : ['position', 'name', 'weight', 'symbol'];
}
Ваш шаблон снова будет простым и хорошо поддающимся тестированию.
Итак, ответ такой, как было предложено, но вам нужно добавить CSS, чтобы он работал.
`Итак," уловка "заключалась в использовании [скрытого]
Однако я не стал использовать это решение, так как оно сделало таблицу «нервной». Вместо этого я решил поместить счетчик в нижний колонтитул таблицы.
mat-row[hidden] {
display: none !important;
}
Пока это решение. Это не совсем решает заявленную проблему.