素数下拉的主要工具提示

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

我找到了解决方案。

//假设carsNew类型为Cars2是要绑定到下拉列表的数组。如果需要使用带有pdropdown的ng-template，则该数组应为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>