Пустое сообщение таблицы Angular PrimeNG

Angular PrimeNG — это библиотека с открытым исходным кодом, состоящая из собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и эта структура используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим, как отображать Table EmptyMessage в Angular PrimeNG.

Компонент таблицы показывает некоторые данные пользователю в табличной форме. Когда в таблице нет данных для отображения, можно использовать шаблон emptymessage для отображения пользовательского сообщения, чтобы сообщить пользователю об отсутствии данных для отображения.

Синтаксис:

<p-table [value]="..."[scrollable]="true | false">
    <ng-template pTemplate="header">
        ...
    </ng-template>
    
    <ng-template pTemplate="body">
        ...
    </ng-template>
    
    <ng-template pTemplate="emptymessage">
        <tr>
            <td>Write-EmptyMessage-Here</td>
        </tr>
    </ng-template>
</p-table>

Создание приложения Angular и установка модулей:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new myapp

Шаг 2: После создания папки проекта, т. е. myapp, перейдите к ней с помощью следующей команды.

cd myapp

Шаг 3: Установите PrimeNG в указанный вами каталог.

npm install primeng --save
npm install primeicons --save

Структура проекта: после выполнения вышеуказанных шагов структура проекта будет выглядеть следующим образом.

Пример 1. В этой статье показано использование шаблона emptymessage для отображения пустого сообщения, когда в таблице нет данных.