如何将 p-table 中的列与动态列连接起来

Question

我的数据源提供以下格式的 json 数据文件。

subjects.json

[
  {
    "subjectCode": "1111",
    "subjectTitle": "English Literature",
    "subjectGroup": "English",
    "status": "Available"
  },
  {
    "subjectCode": "2222",
    "subjectTitle": "Algebra III",
    "subjectGroup": "Mathematics",
    "status": "Not Available"
  }
]

这里是用来读取数据文件的接口class。

subject.model.ts

export interface Subject {
    subjectCode: string;
    subjectTitle: string;
    subjectGroup: string;
    status: string;
}

和组件文件

subject.component.ts

export class SubjectComponent implements OnInit {

    searchResults: Subject[];

    // lots of other stuff

}

出于 UI 设计原因，我需要在浏览器中将主题代码和主题标题显示为单列。如果我使用静态列，这很容易完成。

subject.component.html 带有静态列

<p-table [columns]="cols" [value]="searchResults">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th>Subject</th>
            <th>Group</th>
            <th>Status</th>          
        </tr>
     </ng-template>
     <ng-template pTemplate="body" let-rowData>
         <tr>
            <td>{{rowData.subjectCode}}&nbsp;{{rowData.subjectTitle}}</td>
            <td>{{rowData.subjectGroup}}</td>
            <td>{{rowData.status}}</td>
         </tr>
     </ng-template>
</p-table>

但是，当我尝试对动态列执行相同操作时，我找不到使用动态列使用的 {{rowData[col.field]}} 参数的方法，而且我做不到在 PrimeNG 文档中找到有关如何执行此操作的任何提及。

已修改 subject.component.ts 以使用动态列

export class SubjectComponent implements OnInit {

    searchResults: Subject[];

    // table columns
    this.cols = [
        { field: 'subjectCode', header: 'Subject code'},
        { field: 'subjectTitle', header: 'Subject title'},
        { field: 'subjectGroup', header: 'Group'},
        { field: 'status', header: 'Status'}
    ];

// lots of other stuff
}

使用动态列

修改了subject.component.html

<p-table [columns]="cols" [value]="searchResults">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

如何使用动态列将界面中的主题代码和标题连接到 p-table 中的单个列中？

Answer 1

您可以通过列索引或列字段检查以跳过渲染列，例如this:

<p-table [columns]="cols" [value]="data">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <ng-container *ngFor="let col of columns; let i = index">
                <th *ngIf="i != 1">
                    {{col.header}}
                    <p-sortIcon [field]="col.field"></p-sortIcon>
                </th>
            </ng-container>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <ng-container *ngFor="let col of columns; let i = index">
                <td *ngIf="i == 0">
                    {{ rowData[col.field] + ' ' + rowData[columns[i + 1].field] }}
                </td>
                <td *ngIf="i > 1">
                    {{rowData[col.field]}}
                </td>
            </ng-container>
        </tr>
    </ng-template>
</p-table>

或者像这样：

<p-table [columns]="cols" [value]="data">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <ng-container *ngFor="let col of columns">
                <th *ngIf="col.field != 'subjectTitle'">
                    {{col.header}}
                    <p-sortIcon [field]="col.field"></p-sortIcon>
                </th>
            </ng-container>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <ng-container *ngFor="let col of columns; let i = index">
                <td *ngIf="col.field == 'subjectCode'">
                    {{ rowData.subjectCode + ' ' + rowData.subjectTitle }}
                </td>
                <td *ngIf="col.field != 'subjectTitle' && col.field != 'subjectCode'">
                    {{rowData[col.field]}}
                </td>
            </ng-container>
        </tr>
    </ng-template>
</p-table>

Answer 2

<td *ngIf="i != 1 ">
                            {{car[col.field]}}
                        </td>
                        <td *ngIf="i == 1">'
                            {{car[col.field] | date:'dd/MM/yyyy'}}
                         </td>

 or you can also use **method calls** inside the tags like

<td *ngIf="i == 1">
                    {{sayHello(col.field)}}
                </td>

    then in your ts file,write the method like 



sayHello(colId: string)
{
    return colID+"Hello";
}

如何将 p-table 中的列与动态列连接起来

How to concatenate columns in a p-table with dynamic columns

primeng

angular

angular6

primeng-turbotable