angular - 启动pTooltip循环

我尝试在带有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”进行思考可以，但是我什么也没有。

有人有主意吗？

谢谢

最佳答案

您可以通过设置[escape]="false"并在pTooltip中使用属性绑定(bind)(如[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的属性绑定(bind)来将showList()方法的返回值显示为HTML字符串。

这是一个工作示例:

Plunker demo