Question

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

subjects.json

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

这是用于读取数据文件的接口类。

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表中的单个列中？

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表中的列与动态列连接

2 个答案: