Как отобразить «Записи не найдены», если в таблицах угловых материалов нет записей

Question

Я попытался использовать приведенную ниже ссылку на стекаблиц, чтобы отобразить сообщение «Записи не найдены», когда нет табличных данных, но проблема возникает, когда я использую источник данных типа MatTableDataSource .

стекаблица: https://stackblitz.com/edit/angular-w9ckf8

Ниже приведен фрагмент кода, который я использую:

this.serviceDataSource = new MatTableDataSource(this.services);

соответствующий html:

<table mat-table [dataSource]="serviceDataSource" matSort *ngIf="serviceDataSource.length > 0">
            <ng-container *ngFor="let disCol of serviceColumns" matColumnDef="{{disCol}}">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{disCol}}</th>
                <td mat-cell *matCellDef="let rowValue">{{rowValue[disCol]}}</td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="serviceColumns"></tr>
            <tr mat-row *matRowDef="let rowdata; columns: serviceColumns;"></tr>
        </table>

        <div *ngIf="serviceDataSource.length === 0">No records found</div>

Ниже приведена ошибка, получаемая:

ОШИБКА TypeError: Невозможно прочитать свойство 'length' из неопределенного

Answer 1

Вы можете попробовать, проверив переменную itseft перед тем, как перейти к свойству length, например:

<span *ngIf="serviceDataSource">
   <div *ngIf="serviceDataSource.length === 0">No records found</div>
</span>

StackBlitz с No record found сообщением

Answer 2

Используйте this.serviceDataSource.data.length вместо this.serviceDataSource.length для получения длины источника данных.

Проверьте this

На странице конструирования материала вы можете увидеть MatTableDataSource использует объект данных для манипулирования данными.

Источник данных материала

Answer 3

Вы можете использовать ниже, если ваши данные поступают из API:

*ngIf="serviceDataSource?.length == 0"

Answer 4

Поставьте ? после имени переменной, которое length будет использовано здесь.i.e: serviceDataSource?.length

<div *ngIf="serviceDataSource?.length === 0">No records found</div>

Answer 5

Проблема с доступом к serviceDataSource до его инициализации.Лучше было бы иметь неопределенную проверку или просто изменить код как -

<div *ngIf="serviceDataSource?.length === 0">No records found</div>

или

<div *ngIf="serviceDataSource && serviceDataSource.length === 0">No records found</div>

Answer 6

это не для serviceDataSource.length ошибка, потому что вы не реализуете в контроллере, напишите: serviceDataSource=[]