[英]How to add tooltip to specific header column in primeNG table
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 版本
使用 primeNg 工具提示文档
<th *ngFor="let col of columns" [pTooltip]="col.field === 'brand' ? col.header : null"> {{col.header}} </th>
而不是col.header
之后?
根据需要放置实际的工具提示值。
您可以更新 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.