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

【问题标题】：How to add tooltip to specific header column in primeNG table如何将工具提示添加到 primeNG 表中的特定标题列
【发布时间】：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>

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

【问题讨论】：

标签： html angular typescript primeng primeng-datatable

【解决方案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