启动pTooltip循环 [英] Primeng pTooltip loop

问题描述

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

I try to display a list of string in a pTooltip with an ngFor.

<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"进行思考，但是我什么都没有.

Thinking with [escape]="false" will be ok but i have nothing.

请问有人有主意吗?

谢谢

推荐答案

您可以通过设置 [escape] ="false" 并使用pTooltip这样的属性绑定来显示pTooltip中的HTML内容<代码> [pTooltip] .在此示例中，我使用了< span> 标记，也可以使用< ul> 显示字符串列表.

You can show HTML content in pTooltip by setting [escape]="false" and using property binding with pTooltip like this way [pTooltip]. I have used <span> tag in this example , you can also use <ul> to show a list of strings.

这是完整的工作代码:

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()的返回值显示为HTML字符串.

I have used property binding with pTooltip to show the return value of method showList() as HTML string.

这是一个可行的示例:

柱塞演示

这篇关于启动pTooltip循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！