primeng 数据表:如何在 p 列中使用带有 ng-template 标签的全局过滤器
prime-ng datatable: how to use Globalfilter with ng-template tag in p-column
语境
我在我的 Angular 项目中使用 Prime-ng 数据表模块。我的数据表中有 7 列,如下所示。数据在浏览器中显示很好
问题
我无法使用 [globalFilter]
。当我尝试进行搜索时,数据表中的结果始终显示为 "No records found"。就像全局过滤器无法访问我的 <ng-template>
.
中的数据一样
APP.COMPONENT.HTML
<!-- language: lang-html -->
<div>
<input #gb type="text" pInputText size="50" placeholder="Global Filter">
</div>
<p-dataTable [value]="reviewTasksList" [rows]="5" [paginator]="true" [globalFilter]="gb" [pageLinks]="3" [responsive]="true" [stacked]="stacked">
<p-column field="name" header="Name">
<ng-template let-col let-file="rowData" pTemplate="body">
<a [routerLink]="[file.id]" href="#">{{ file.category.name }}</a>
</ng-template>
</p-column>
</p-dataTable>
我认为你应该确保 field
设置正确。
比如你的模型对应这个:
reviewTaskList = {
category: {
name: "Category Name"
}
}
那么你必须像这样使用它:
<p-dataTable [value]="reviewTasksList" [rows]="5" [paginator]="true" [globalFilter]="gb" [pageLinks]="3" [responsive]="true" [stacked]="stacked">
<p-column field="reviewTasksList.category.name" header="Name"></p-column>
</p-dataTable>
语境
我在我的 Angular 项目中使用 Prime-ng 数据表模块。我的数据表中有 7 列,如下所示。数据在浏览器中显示很好
问题
我无法使用 [globalFilter]
。当我尝试进行搜索时,数据表中的结果始终显示为 "No records found"。就像全局过滤器无法访问我的 <ng-template>
.
APP.COMPONENT.HTML
<!-- language: lang-html -->
<div>
<input #gb type="text" pInputText size="50" placeholder="Global Filter">
</div>
<p-dataTable [value]="reviewTasksList" [rows]="5" [paginator]="true" [globalFilter]="gb" [pageLinks]="3" [responsive]="true" [stacked]="stacked">
<p-column field="name" header="Name">
<ng-template let-col let-file="rowData" pTemplate="body">
<a [routerLink]="[file.id]" href="#">{{ file.category.name }}</a>
</ng-template>
</p-column>
</p-dataTable>
我认为你应该确保 field
设置正确。
比如你的模型对应这个:
reviewTaskList = {
category: {
name: "Category Name"
}
}
那么你必须像这样使用它:
<p-dataTable [value]="reviewTasksList" [rows]="5" [paginator]="true" [globalFilter]="gb" [pageLinks]="3" [responsive]="true" [stacked]="stacked">
<p-column field="reviewTasksList.category.name" header="Name"></p-column>
</p-dataTable>