angular - 如何将 HTML 模板与primeng DataTables 一起使用？

Question

我正在使用 Primeng 的 dataTable 但找不到如何将 HTML 代码设置为标题的值。

我必须设置表的第一个标题是复选框/收音机，但我只能使用header属性添加文本p-column

我知道 Datatable 中的模板。这个怎么用？

在这里我想设置复选框而不是标题中的文本（第一行）

任何想法 ？

Answer 1

普拉迪普，

PrimeNG Beta-11 于 7 月 26 日发布，支持选择模式作为单选和复选框的“单个”和“多个”选项。

单选按钮：

<p-column [style]="{'width':'38px'}" selectionMode="single"></p-column>

复选框：

<p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>

您可以在此处找到详细信息 - http://www.primefaces.org/primeng/#/datatableselection

Answer 2

PrimeNG Beta.14 支持页眉和页脚部分的模板。

默认情况下，对应行的字段数据显示为单元格内容，这可以使用模板自定义，其中传递给模板的隐式变量是列定义，当前行的数据是 rowData 属性。此外，可以使用可选的 rowIndex 变量访问当前的索引。同样，自定义内容可以放置在带有模板的列的页眉和页脚中。

列内的模板必须使用 pTemplate 指令以及 type 属性进行修饰，以指示模板所属的位置。可能的值是“header”、“body”和“footer”。

<p-column field="color" header="Color">
    <template let-col #car="rowData" #ri="rowIndex" pTemplate type="body">
        <span">{{car[col.field]}}</span>
    </template>
</p-column>
<p-column>
    <template pTemplate type="header">
        <button type="button" pButton (click)="selectAllCars()" icon="fa-check"></button>
    </template>
    <template let-car="rowData" pTemplate type="body">
        <button type="button" pButton (click)="selectCar(car)" icon="fa-search"></button>
    </template>
</p-column>

Answer 3

从 Angular 4 和 PrimeNG 4 开始，模板已被弃用，取而代之的是 ng-template。

以下代码演示了如何使用 ng-template 将链接添加到 PrimeNG p-dataTable 组件。

<p-dataTable [value]="myStore.myList | async">
<p-column field="name" header="Name">
  <ng-template let-col let-myItem="rowData" pTemplate="body">
    <a href="#" (click)="selectItem(myItem);">
      {{myItem[col.field]}}
    </a>
  </ng-template>
</p-column>
...

标签“let-col”通过上下文变量 $implicit 使 Column 对象在模板中可用。请参阅 PrimeNG 通用shared.d.ts源文件中的列以查看所有可能的字段。有不少。

标签

let-myItem="rowData"

使整个 rowData 字段可用于模板。

另一个标签 let-i 使当前行索引可供使用：

let-ri="rowIndex"

当模板用于确定如何关联每个模板时，PrimeNG DataTable 需要 pTemplate 指令。潜在值是“header”、“body”和“footer”。 PrimeNG 数据表文档