Primeng pTooltip 运行

Question

我尝试在带有 ngFor 的 pTooltip 中显示字符串列表。

<div pTooltip="Liste: <span *ngFor='let code of {{codes}}'>{{code}}</span>" [escape]="false"></div>

或

<div pTooltip="Liste: <ng-template ngFor let-code [ngForOf]="codes"><span>{{code}}</span></ng-template>" [escape]="false"></div>

想着用[escape]="false"就可以了，可是我什么都没有

有人有想法吗？

谢谢

Answer 1

您可以通过设置 [escape]="false" 并使用属性像这样 [pTooltip] 与 pTooltip 绑定来在 pTooltip 中显示 HTML 内容。我在这个例子中使用了 <span> 标签，你也可以使用 <ul> 来显示字符串列表。

这是完整的工作代码：

Component.ts 文件：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})
export class AppComponent {
  isDisabled = false;
  isTooltipDisabled = false;
  codes:any[] = ['test1','test2','test3'];
    disable() {
        this.isTooltipDisabled = true;
        this.isDisabled = true;
    }

    showList():string{

      let temp:string = ``;
      for(let code of this.codes){
        temp+=`<span>${code}</span><br>`;
      }

      return temp;
    }

}

组件HTML:

<h2>PrimeNG Issue</h2>

<div>     
    <div [pTooltip]="showList()" [escape]="false" tooltipPosition="bottom">This is sample</div>

</div>

我已经使用属性与 pTooltip 绑定来将方法 showList() 的 return 值显示为 HTML 字符串。

这是一个工作示例：

Plunker demo

Primeng pTooltip 运行

Primeng pTooltip loop

tooltip

primeng

angular