angular - 为什么响应式primeng表中不显示表头?
问题描述
我有一个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"
}
]
}
}
知道如何解决这个问题吗?
解决方案
只需添加您ui-column-title
的td
表格:
<td><span class="ui-column-title">Names</span>{{ person.names }}</td>
推荐阅读
- python - Python:如何使用从列计算的乘法字段扩展 DataFrame
- groovy - 如何使用脚本运行器创建自定义字段?
- haskell - 递归类型是haskell,它不重复同一个构造函数
- javascript - 在复选框更改时,找到并选中另一个复选框并修改一些文本输入的值
- c++ - C++ 无锁队列
- django - MultiValueDictKeyError,当我按下注册按钮时
- java - 如何在 xpath 中传递变量字符串以识别 Selenium 和 Java 中的元素
- python - 如何使用 Matplotlib 更改 Y 轴的比例距离?
- python-3.x - 如何在div标签下抓取多个图像标签
- javascript - Javascript替换方法对我不起作用?