Как добавить «Нет записи» в PrimeNG Datatable Когда данных нет?

Question

Я искал на официальном сайте primeNG, и я обнаружил, что нет такого атрибута, как emptyMessage= "No Record Found" для таблицы данных в PrimeNG ref. http://www.primefaces.org/primeng/#/datatable

Поэтому, когда в моей таблице данных не было данных, он не показывает мне никаких сообщений.

<p-dataTable #datatable [value]="jobData" [rows]="20" [paginator]="true" 
      [responsive]="true" selectionMode="single"><--emptyMessage="" not working here as attribute :(
    <p-column expander="true" styleClass="icon"></p-column> 
      <p-column field="finOrVin" styleClass="vinfin" header="header" sortable="custom" (sortFunction)="sort($event)"> 
      <p-column field="state" styleClass="status" header="Status" sortable="custom" (sortFunction)="sort($event)"> 
      </p-column> 
    </p-dataTable> 

Answer 1

В соответствии с документацией в DataTable на самом деле нет такого тега. У меня была такая же проблема/вопрос. И я решил это, создав второй элемент, который я показываю вместо DataTable. Поэтому добавление условия вроде *ngIf="jobData.length==0".

Например:

<p-dataTable #datatable [value]="jobData" [rows]="20" [paginator]="true" 
     [responsive]="true" selectionMode="single" *ngIf="jobData.length>0"> 
    <p-column expander="true" styleClass="icon"></p-column> 
    <p-column field="finOrVin" styleClass="vinfin" header="header" sortable="custom" (sortFunction)="sort($event)"></p-column> 
    <p-column field="state" styleClass="status" header="Status" sortable="custom" (sortFunction)="sort($event)"></p-column> 
</p-dataTable> 
<div *ngIf="jobData.length==0"> 
    No values to display here 
</div> 

Вы можете добавить запрос функции для этого? В моем случае опция «Нет значений для отображения здесь» на самом деле лучше, потому что тогда у меня нет заголовков каталоги данных. Хотя вы, вероятно, будете иметь заголовки, если используете тег.

Answer 2

Datatable принимает переменную типа строки для этого атрибута:

<p-dataTable ... [emptyMessage]="myVariable" ...> 

И контроллер помещает строку в переменную (т.е. с использованием NGX-перевод):

class ... { 
    public myVariable; 
    ngOnInit() { 
     this.translateService.get('MY_TRANSLATION').subscribe(
      (translationString) => { 
       this.myVariable = translationString; 
      } 
     ); 
    ... 
} 

EDIT : Я столкнулся с решением, чтобы сделать это прямо в шаблоне. (опустить скобки для атрибута):

emptyMessage="{{ 'MY_TRANSLATION' | translate }}" 

Answer 3

Согласно official documentation это теперь доступно в качестве шаблона.

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

<p-dataTable [value]="cars" [responsive]="true"> 
    <p-column field="vin" header="Vin"></p-column> 
    <p-column field="year" header="Year"></p-column> 
    <p-column field="brand" header="Brand"></p-column> 
    <p-column field="color" header="Color"></p-column> 
    <ng-template pTemplate="emptymessage"> 
    Custom content goes here 
    </ng-template> 
</p-dataTable>