自定义 PrimeNg <p-dataTable> 列名答案

【问题标题】：Customize PrimeNg <p-dataTable> column names自定义 PrimeNg <p-dataTable> 列名
【发布时间】：2019-02-08 04:14:01
【问题描述】：

我的 HTML 页面有 2 个表，它们都有不同的列名。我的第一个表有Application ID 和Application Type 列，而我的第二个表有File Name 和Checkbox s 列（选择和删除文件）。对于这种情况，我必须使用 PrimeNg 数据表，即<p-dataTable>。我可以自定义数据表列名称吗？请指导我如何实现这一目标？

到目前为止，我所做的是：

table.ts 如下

folderData = FolderData[];

(model) FolderData.ts 如下

appID: string;
appType: string;
filename: string;
checkBox: boolean;

table.html 如下

**First Data Table**
<p-dataTable [value]="folderData ">
  <p-header [style]="{'width': '100%'}">
    <div class="ui-helper-clearfix">
      Big Table
    </div>
  </p-header>

  <p-column field="Col1" header="Application ID" [sortable]="true" [style]="{'width': '200px'}"></p-column>
  <p-column field="Col2" header="Application Name" [sortable]="true" [style]="{'width': '200px'}"></p-column>
</p-dataTable>

**Second Data Table**
<p-dataTable [value]="folderData ">
  <p-header [style]="{'width': '100%'}">
    <div class="ui-helper-clearfix">
      Big Table
    </div>
  </p-header>

  <p-column field="Col1" header="File Name" [sortable]="true" [style]="{'width': '200px'}"></p-column>
  <p-column field="Col2" header="" [sortable]="true" [style]="{'width': '200px'}"><input type="checkbox"></p-column>
</p-dataTable>

我不知道如何自定义列名，所以我对它们进行了编码。请指导。

【问题讨论】：

你能为此创建一个 stsckblitz 吗？？
使用动态列。

标签： angular primeng primeng-datatable

【解决方案1】：

在 HTML 端，你必须在 'field' 中绑定对象的属性名称。

代替：

<p-column field="Col1" header="Application ID" [sortable]="true" [style]="{'width': '200px'}"></p-column>

试试：

<p-column field="appID" header="Application ID" [sortable]="true" [style]="{'width': '200px'}"></p-column>

【讨论】：

【解决方案2】：

我和你有同样的问题，我实现了如下

 <p-dataTable [value]="datasource" selectionMode="single" [(selection)]="selectedRow"
                                     dataKey="grpCode"
                                     [lazy]="true" [totalRecords]="totalRecords"
                                     (onLazyLoad)="loadMainGroupsLazy($event)"
                                     [rows]="perPageRecord" [paginator]="true" [pageLinks]="3"
                                     [rowsPerPageOptions]="[5,10,20]">
                            <p-column field="grpCode">
                                <ng-template pTemplate="header">
                                    Plan Kodu
                                    <a style="cursor: pointer" (click)="sort(2)">
                            <span
                                [ngClass]="getDirection(2)"></span>
                                    </a>
                                </ng-template>
                            </p-column>
                            <p-column field="isMandatory">
                                <ng-template pTemplate="header">
                                    Zorunlu mu?
                                    <a style="cursor: pointer" (click)="sort(3)">
                                        <span [ngClass]="getDirection(3)"></span>
                                    </a>
                                </ng-template>
                                <ng-template let-col let-plan="rowData" let-ri="rowIndex" pTemplate="body">
                                    <p-checkbox [(ngModel)]="plan[col.field]" binary="true"></p-checkbox>
                                </ng-template>
                            </p-column>
                            <p-column field="validityStartDate">
                                <ng-template pTemplate="header">
                                    Başlangıç Tarihi
                                    <a style="cursor: pointer" (click)="sort(3)">
                                        <span [ngClass]="getDirection(3)"></span>
                                    </a>
                                </ng-template>
                                <ng-template let-col let-plan="rowData" let-ri="rowIndex" pTemplate="body">
                                    <span>{{plan[col.field] | date: 'yyyy-mm-dd'}}</span>
                                </ng-template>
                            </p-column>
                            <p-column field="validityEndDate">
                                <ng-template pTemplate="header">
                                    Bitiş Tarihi
                                    <a style="cursor: pointer" (click)="sort(3)">
                                        <span [ngClass]="getDirection(3)"></span>
                                    </a>
                                </ng-template>
                                <ng-template let-col let-plan="rowData" let-ri="rowIndex" pTemplate="body">
                                    <span>{{plan[col.field] | date: 'yyyy-mm-dd'}}</span>
                                </ng-template>
                            </p-column>

                        </p-dataTable>

【讨论】：