11

我在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>
4

5 回答 5

19

您只需将以下代码放在 ng-templatepTemplate="body"标记之后：

<ng-template pTemplate="emptymessage" let-columns>
  <tr>
    <td [attr.colspan]="columns.length">
       No records found
    </td>
  </tr>
</ng-template>
于 2019-01-29T17:22:37.903 回答
10

根据官方文档，现在可以作为模板使用。

当没有数据时，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>
于 2017-12-04T19:57:28.663 回答
7

数据表为此属性采用字符串类型的变量：

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

控制器将字符串放入变量中（即使用 ngx-translate）：

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

编辑： 我遇到了直接在模板中执行此操作的解决方案。（省略属性的括号）：

emptyMessage="{{ 'MY_TRANSLATION' | translate }}"
于 2017-03-31T08:42:54.230 回答
6

根据文档，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>

您可以为此添加功能请求吗？就我而言，“这里没有要显示的值”选项实际上更好，因为那时我没有数据列表的标题。如果您使用标签，您可能会有标题。

于 2016-06-27T17:43:09.927 回答
0

我通过控制器找到了一个更优雅、更时尚的解决方案：将第一个字段设置为“未找到数据”的“假”记录推入数据源数组，因为它显示在表格内，并且没有被白线覆盖表本身（见附图）。

NG 模板与假记录解决方案

于 2018-09-04T11:54:00.690 回答