Question

我有一个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"
      }

    ]

  }

}

有什么办法解决这个问题吗？

干杯，尼丁

Answer 1

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

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

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

Answer 3

我正在使用PrimeNG 10库。当p表响应时，仅显示主体。根据以下 table.css 文件，这似乎是Primefaces设计的：

@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标签很可能会替换标头值。

为什么表头未显示在响应式Primeng表中？

3 个答案: