Как я могу отобразить Нет записей, если в таблицах материалов 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>

Ниже я получаю сообщение об ошибке:

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


angular angular-material mat-table
person Rakshith    schedule 04.12.2018    source источник
comment
в вашей демонстрации ошибок нет, вы можете попробовать *ngIf="!serviceDataSource.length   -  person Fateme Fazli    schedule 04.12.2018
comment
Добавили ответ, проверьте!   -  person Prashant Pimpale    schedule 04.12.2018

Ответы (7)


arrow_upward
2
arrow_downward

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

Проверьте это

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

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

person user1503592    schedule 04.12.2018

arrow_upward
0
arrow_downward

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

person miladdn131    schedule 04.12.2018

arrow_upward
0
arrow_downward

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

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

or

<div *ngIf="serviceDataSource && serviceDataSource.length === 0">No records found</div>
person Sunil Singh    schedule 04.12.2018
comment
Пробовал с неопределенной проверкой сейчас .. Ошибка исчезла, но сообщения на дисплее все еще нет - person Rakshith; 04.12.2018
comment
serviceDataSource.data.length вместо serviceDataSource.length может вам помочь. - person Sunil Singh; 04.12.2018

arrow_upward
0
arrow_downward

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

<div *ngIf="serviceDataSource?.length === 0">No records found</div>
person Harunur Rashid    schedule 04.12.2018

arrow_upward
0
arrow_downward

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

*ngIf="serviceDataSource?.length == 0"
person Sunil Game    schedule 04.12.2018

arrow_upward
0
arrow_downward

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

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

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

person Prashant Pimpale    schedule 04.12.2018

arrow_upward
0
arrow_downward

Это одна из лучших концепций для отображения записей, не найденных в 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>
person SantoshK    schedule 21.03.2021