Primeng 可扩展列标题不显示答案

【问题标题】：Primeng expandable column headers don't showPrimeng 可扩展列标题不显示
【发布时间】：2017-02-09 13:17:05
【问题描述】：

我在 Angular2 中有一个使用 Primeng2 的可扩展行，但未显示可扩展列的列标题。

这是我的带有可扩展行的表格：

   <p-dataTable [value]="activetrucks" expandableRows="true" [(selection)]="selectedtruck">
  <p-header>
    List of Active trucks

  </p-header>
  <p-column expander="true"></p-column>
  <p-column field="owner_id" header="Transporter"></p-column>
  <p-column field="reg_no" header="Truck number"></p-column>
  <p-column field="truck_category" header="Truck type" ></p-column>

  <template let-user pTemplate="rowexpansion">  //headers dont show
    <div class="ui-grid ui-grid-responsive ui-fluid"> 
      <p-dataTable [value]="stages" [paginator]="true" [pageLinks]="3">
        <p-header>
          The different stages
        </p-header>
        <p-column field="status" header="Status"></p-column>  
        <p-column field="created_at" header="Done by"></p-column>
        <p-column field="created_by" header="Date"></p-column>

        <p-column styleClass="col-button">
          <template let-truck="rowData" pTemplate="body">
            <button type="button" pButton (click)="onremoveTruck(truck)" icon="fa-remove"></button>
          </template>
        </p-column>

      </p-dataTable>
    </div>
  </template>

</p-dataTable>

在展开行中，标题不显示，如下图所示。

可能出了什么问题？

【问题讨论】：

您能否在开发者工具中检查标题文本是否存在但被 CSS 隐藏或文本根本不存在？
标题文本在那里，但被 css 类隐藏 .ui-datatable-reflow .ui-datatable-data td .ui-column-title { display: none; }
所以可能只是用一些类标记您的嵌套表并创建一个 CSS 规则来更改其标题的显示属性。

标签： angular typescript primeng

【解决方案1】：

创建或编辑包含此内容的 css 文件：

th .ui-column-title {
    display: inline !important;
}

然后编辑你的组件文件：

import {ViewEncapsulation} from '@angular/core';

@Component({
  ...
  styleUrls: ['file.css'],
  encapsulation: ViewEncapsulation.None
})

【讨论】：

【解决方案2】：

我遇到了类似的问题，并且能够通过从表定义中删除 [responsive] 属性来解决它。

I have posted an answer here

【讨论】：