Question

我需要在鼠标悬停时在下拉项上显示工具提示。我的html代码如下：-

<p-dropdown [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name"></p-dropdown>

in app.component.ts

this.cities2 = [
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ];

如何实现？任何指针都请..

上面将仅在字段中直接显示工具提示。如何在每个下拉项目中显示工具提示？

Answer 1

我为此找到了解决方案。

///假设Cars2类型的carsNew是要绑定到下拉列表的数组。如果需要将ng-template与pdropdown一起使用，则数组的类型应为SelectedItem Interface。

interface cars2{
    code:string;
    description:string
  }

carsNew:cars2[];
carsNew2:SelectItem[] = [];

constructor() {
            this.carsNew=[
            {code:"ABC", description:"ABC Value"},
            {code:"DEF", description:"DEF Value"},
            {code:"GHI", description:"GHI Value"}
          ];
}

ngOnInit(): void {
   //read through carsNew2 and add it to carsNew2
    for(let c of this.carsNew){
      this.carsNew2.push({label: (c.code), value: (c.description)} )
    }
  }

<p-dropdown 
[options]="carsNew2"
[(ngModel)]="selectedCar2"
[style]="{'width':'50%'}"
scrollHeight="400px">
  <ng-template let-item pTemplate="selectedItem">
      {{(item.title) ? 'TODO' : item.label}}
  </ng-template>
  <ng-template let-car2 pTemplate="item">
    <div [pTooltip]="car2.value"> 

         <li><span class="item-value1">{{car2.label}}</span>
          </li> 
    </div>
  </ng-template>    
</p-dropdown>

prime-ng下拉菜单上的prime-ng工具提示

1 个答案: