如何将工具提示添加到 primeNG 表中的特定标题列
Posted
技术标签:
【中文标题】如何将工具提示添加到 primeNG 表中的特定标题列【英文标题】:How to add tooltip to specific header column in primeNG table 【发布时间】:2021-04-03 06:57:57 【问题描述】:HTML
<p-table #dt1 [columns]="cols" [value]="cars1">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns"> col.header </th>
</tr>
</ng-template>
</p-table>
TS
export class Table implements OnInit
cols: any[];
ngOnInit()
this.cols = [
field: 'year', header: 'Year' ,
field: 'brand', header: 'Brand' ,
field: 'color', header: 'Color'
];
我只想为品牌列显示工具提示
在 Angular 9.1.3 上使用 PrimeNG 9.2.1 版本
【问题讨论】:
【参考方案1】:使用 primeNg 工具提示docs
<th *ngFor="let col of columns" [pTooltip]="col.field === 'brand' ? col.header : null"> col.header </th>
在?
之后根据需要放置实际的工具提示值,而不是col.header
。
【讨论】:
【参考方案2】:您可以更新 cols 以包含一些 pTooltip 值。
组件
this.cols = [
field: 'year', header: 'Year' , tooltip: 'Year ?',
field: 'brand', header: 'Brand' ,
field: 'color', header: 'Color' , tooltip: 'Color of ?♂️'
];
模板
<p-table #dt1 [columns]="cols" [value]="cars1">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pTooltip]="col.tooltip"> col.header </th>
</tr>
</ng-template>
stackblitz demo ?
【讨论】:
太棒了!这就是我一直在寻找的。谢谢! @malbarmavi以上是关于如何将工具提示添加到 primeNG 表中的特定标题列的主要内容,如果未能解决你的问题,请参考以下文章
PrimeNG - 如何在 p-tabView 组件中动态添加和删除 p-tabPanel
如何将自定义图标添加到 Angular2 primeng Tree