Question

我在primeNG官方网站上搜索过，我发现PrimeNG中的数据表没有像emptyMessage= "No Record Found"这样的属性参考文献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为此属性采用string类型的变量：

    A   B   C   D   E
A   100 58  64  78  32
B   58  100 10  12  54
C   64  10  100 99  84
D   78  12  99  100 42
E   32  54  84  42  100

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

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

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

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

Answer 2

您只需将ng-template pTemplate =“ body”标记放在此代码之后：

 <ng-template pTemplate="emptymessage" let-columns>
                <tr>
                    <td [attr.colspan]="columns.length">
                        No records found
                    </td>
                </tr>
    </ng-template>

Answer 3

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

您可以为此添加功能请求吗？在我的情况下，“没有值显示在这里”选项实际上更好，因为那时我没有datalist的标题。如果你使用标签，你可能会有标题。

Answer 4

根据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>

Answer 5

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

如何在PrimeNG数据表中添加“No Record Found”当数据不存在时？

5 个答案: