如何将工具提示添加到 primeNG 表中的特定标题列

Answer 1

使用 primeNg 工具提示 docs

<th *ngFor="let col of columns" [pTooltip]="col.field === 'brand' ? col.header : null"> {{col.header}} </th>

根据需要放置实际的工具提示值，而不是在

col.header

之后放置

?

。

Answer 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 演示