我在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>
答案 0 :(得分:6)
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;
}
);
...
}
答案 1 :(得分:6)
您只需将ng-template pTemplate =“ body”标记放在此代码之后:
<ng-template pTemplate="emptymessage" let-columns>
<tr>
<td [attr.colspan]="columns.length">
No records found
</td>
</tr>
</ng-template>
答案 2 :(得分:5)
根据文档,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的标题。如果你使用标签,你可能会有标题。
答案 3 :(得分:5)
根据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>
答案 4 :(得分:0)