单击事件在模板内的 PrimeNg 列表框中不起作用

Question

我正在尝试在 Prime Ng 的列表框模板内添加点击事件，但下面的事件未被监听是 stackblitz 代码和演示链接。

下面是代码

   <h5>Single</h5>
<p-listbox [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" [style]="{'width':'15rem'}">
    <ng-template let-country pTemplate="item">
        <div class="country-item">
            <div>{{country.name}}</div>
            <a (click)="editProject('hii')"><i class="pi pi-pencil"></i></a>
        </div>
    </ng-template>
</p-listbox>

https://stackblitz.com/edit/primeng-listbox-demo-dxcpdt?file=src/app/app.component.ts

Answer 1

问题在于 prime-ng 样式，p-listbox 有一个 .p-ink 类，它会弹出整个列表项，使其无法点击。因此，可以通过隐藏.p-ink 来使<a> 可点击。

用这个替换你的 ts 中的样式：

  styles: [
    `
      :host ::ng-deep .ui-listbox {
        width: 20em;
        z-index: -1 !important;
      }
      :host ::ng-deep .p-ink {
        display: none !important;
      }
    `
  ]