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

Question

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

下面是代码

   <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 class 会弹出整个列表项，使其无法点击。因此，可以通过隐藏 .p-ink.

来实现 <a> 可点击

将 ts 中的样式替换为：

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

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

click event not working in PrimeNg List box inside template

primeng

angular

angular10