Question

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

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

table.ts如下

folderData = FolderData[];

（模型）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>

我无法弄清楚如何自定义列名称，因此我对它们进行了编纂。请指导。

Answer 1

在HTML端，您必须将对象的属性名称绑定到“字段”中。

而不是：

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

Answer 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>

自定义PrimeNg <p-datatable>列名称

2 个答案: