为什么 table headers 没有显示在响应式 primeng table 中？

Question

我有一个 primeng 数据table，它在正常模式下正确呈现。但是，当我在移动视图中查看时，table headers 没有显示。我将 table 的响应式属性设置为 true。请看截图。

我在另一个屏幕的移动视图中为数据table 正确显示了headers。我已经比较了代码，它们很相似，只是 table 有一个全局过滤器。

我的组件html代码：

<p-table
  #dt
  [columns]="cols"
  [value]="deals"
  [autoLayout]="true"
  [responsive]="true"
>
  <ng-template pTemplate="caption">
    <div style="text-align: right">
      <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
      <input
        type="text"
        pInputText
        size="30"
        placeholder="Search"
        (input)="dt.filterGlobal($event.target.value, 'contains')"
      />
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [pSortableColumn]="col.field">
        {{ 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">
        <span *ngIf="col.header === 'Opportunity Id'"
          ><a routerLink="/proposal">{{ rowData[col.field] }}</a></span
        >
        <span *ngIf="col.header !== 'Opportunity Id'">{{
          rowData[col.field]
        }}</span>
      </td>
    </tr>
  </ng-template>
</p-table>

我的组件 ts 文件：

import { Component, OnInit } from '@angular/core';
import { Deal } from '@app-interfaces/models/deal';

@Component({
  selector: 'app-pending',
  templateUrl: './pending.component.html',
  styleUrls: ['./pending.component.scss']
})
export class PendingComponent implements OnInit {
  deals: Deal[];
  cols: any;

  constructor() { }

  ngOnInit() {
    this.cols = [
      { field: 'sfdcOpportunityId', header: 'Opportunity Id' },
      { field: 'proposalId', header: 'Proposal Id' },
      { field: 'salesPersonName', header: 'Sales Person Name' },
      { field: 'status', header: 'Status' },
      { field: 'customerName', header: 'Customer Name' },
      { field: 'revenue', header: 'Revenue' },
      { field: 'leaseType', header: 'Type' },
      { field: 'signedDate', header: 'Date' },
      { field: 'dcn', header: 'DCN' }
    ];


    this.deals = [
      {
        "sfdcOpportunityId": "0060z00001tsdfsdNmVtAAK",
        "proposalId": "32435565",
        "salesPersonName": "Kevin Reynolds",
        "status": "Pending",
        "customerName": "Commerce, Inc.",
        "revenue": ",360.00",
        "leaseType": "FSL",
        "signedDate": "2017-09-12",
        "dcn": "247279",
        "salesPersonFirstName": null,
        "salesPersonLastName": null,
        "proposalDate": null,
        "customerId": "0",
        "userType": "User"
      }

    ]

  }

}

知道如何解决这个问题吗？

干杯，尼汀

Answer 1

我找到了答案。您需要再次添加 header 才能在移动视图中显示。我的错误印象是 header 模板中的 headers 即使在移动视图中也会被用来显示为 headers。

所以我将代码修改为：

<td *ngFor="let col of columns">
     <span class="ui-column-title">{{ col.header }}</span> 
     <span *ngIf="col.header === 'Opportunity Id'"
      ><a routerLink="/proposal">{{ rowData[col.field] }}</a></span
    >
    <span *ngIf="col.header !== 'Opportunity Id'">{{
      rowData[col.field]
    }}</span>
  </td>

Answer 2

只需在 table 的 td 中添加 ui-column-title:

<td><span class="ui-column-title">Names</span>{{ person.names }}</td>

Answer 3

我正在使用 PrimeNG 10 库。当 p-table 响应时，它只显示 body。这似乎是由 Primefaces 根据以下 table.css 文件设计的：

@media screen and (max-width: 40em) {
  .p-datatable.p-datatable-responsive .p-datatable-thead > tr > th,
  .p-datatable.p-datatable-responsive .p-datatable-tfoot > tr > td {
    display: none !important;
  }
  ...

原因很可能是 ui-column-title/p-column-title span 标签正在替换 header 值。

Answer 4

请记住

<span class="ui-column-title">Title</span>

已更改为

<span class="p-column-title">Title</span>

Answer 5

对于 PrimeNG 12，只需在下面添加 responsiveLayout="scroll" 即可显示 table header:

<p-table #table
         responsiveLayout="scroll"
         ...

为什么 table headers 没有显示在响应式 primeng table 中？

Why are table headers not displayed in responsive primeng table?

primeng

angular

primeng-datatable