Как я могу отобразить «Записи не найдены», если в таблицах материалов angular нет записей
Я попробовал использовать приведенную ниже ссылку stackblitz, чтобы отобразить сообщение «Записи не найдены», когда данные таблицы отсутствуют, но проблема возникает, когда я использую источник данных типа MatTableDataSource.
ссылка stackblitz: 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>
Ниже я получаю сообщение об ошибке:
ERROR TypeError: Cannot read property 'length' of undefined
Добавили ответ, проверьте!
Ответы 7
это не для serviceDataSource.length его ошибка, потому что вы не реализуете его в контроллере,
написать: serviceDataSource=[]
Проблема связана с доступом к serviceDataSource до его инициализации. Лучше было бы иметь неопределенную проверку или просто изменить код как -
<div *ngIf = "serviceDataSource?.length === 0">No records found</div>
или
<div *ngIf = "serviceDataSource && serviceDataSource.length === 0">No records found</div>
Пробовал с неопределенной проверкой сейчас .. Ошибка исчезла, но сообщения на дисплее все еще нет
serviceDataSource.data.length вместо serviceDataSource.length может вам помочь.
Поместите ? после имени переменной, которая здесь будет использоваться length. i.e: serviceDataSource?.length
<div *ngIf = "serviceDataSource?.length === 0">No records found</div>
Вы можете использовать ниже, если ваши данные поступают из API:
*ngIf = "serviceDataSource?.length == 0"
Используйте this.serviceDataSource.data.length вместо this.serviceDataSource.length, чтобы получить длину источника данных.
Проверить это
На странице материального дизайна вы можете увидеть, что MatTableDataSource использует объект данных для управления данными.
Вы можете попробовать, проверив переменную itseft, прежде чем переходить к свойству length, например:
<span *ngIf = "serviceDataSource">
<div *ngIf = "serviceDataSource.length === 0">No records found</div>
</span>
StackBlitz с сообщением No record found
Это одна из лучших концепций для отображения записей, не найденных в angular 2+.
<p>
<input type = "text" [(ngModel)] = "name" />
</p>
<ng-container *ngIf = "( items | filter : name) as result">
<p *ngFor = "let item of result">
{{item.name}}
</p>
<p *ngIf = "result.length === 0">No Result</p>
</ng-container>
в вашей демонстрации ошибок нет, вы можете попробовать
*ngIf = "!serviceDataSource.length