Angular 为什么表头不显示在响应的启动表中？

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

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

我的组件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>

你知道怎么解决这个问题吗

干杯， 尼汀

---

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

因此，我将代码修改为：

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

{{col.header}}
{{rowData[col.field]}
{{
行数据[列字段]
}}

只需在表的

td

中添加

ui列标题即可：

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

Names{{person.Names}
我正在使用PrimeNG 10库。当p-table响应时，它仅显示主体。这似乎是由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列标题/p-column-title span标记正在替换标题值

@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;
  }
  ...