为什么响应式primeng表中不显示表头？答案

【问题标题】：Why are table headers not displayed in responsive primeng table?为什么响应式primeng表中不显示表头？
【发布时间】：2019-08-08 17:47:20
【问题描述】：

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

我在另一个屏幕的移动视图中正确显示了数据表的标题。我比较了代码，除了这个表有一个全局过滤器之外，它们是相似的。

我的组件 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": "$1,360.00",
        "leaseType": "FSL",
        "signedDate": "2017-09-12",
        "dcn": "247279",
        "salesPersonFirstName": null,
        "salesPersonLastName": null,
        "proposalDate": null,
        "customerId": "0",
        "userType": "User"
      }

    ]

  }

}

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

干杯，尼丁

【问题讨论】：

标签： angular primeng primeng-datatable

【解决方案1】：

只需在表的td 中添加ui-column-title：

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

【讨论】：

【解决方案2】：

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

所以我将代码修改为：

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

【讨论】：

【解决方案3】：

我正在使用 PrimeNG 10 库。当 p 表响应时，它只显示正文。这似乎是 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 值。

【讨论】：

【解决方案4】：

请记住

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

已改为

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

【讨论】：

【解决方案5】：

对于 PrimeNG 12，只需在您的以下添加 responsiveLayout="scroll" 以显示表格标题：

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

【讨论】：