Priming下拉菜单防止覆盖关闭项目选择并更新选项

Question

单击"-更多-"；选项我让它与选项模板和绑定点击事件一起工作，我阻止它停止传播((函数。

<ng-template let-city pTemplate="item">
<span (click)="onClickFunction(city, $event)">{{city.label}}</span>
</ng-template>
onClickFunction(city, e) {
if (city.label === '-More-') {
this.cities.pop();
this.cities = [...this.cities, ...this.newCities];
e.stopPropagation();
this.cd.markForCheck();
this.cd.detectChanges();
}
}

但问题是，有时它从第一次加载开始就可以工作，但通常我会在"-更多-"；选项，然后它才能正常工作。我这是个bug还是我做错了？也许还有更好的解决方案？感谢

https://stackblitz.com/edit/primeng-dropdown-demo-j6te3c

Answer 1

所以我发现了为什么这有时不起作用的问题。

绑定了(click(事件的<span>比包装得更高的框(<li>(小得多，所以当在span上单击时，如果您向右单击文本选项"-更多-"；否则就不会起作用。

对我来说，解决方案是使用<div>而不是<span>，并用负边距覆盖默认填充，并为添加精确的填充

代码：

<ng-template let-city pTemplate="item">
<div class="option" (click)="onClickFunction(city, $event)">{{city.label}}</div>
</ng-template>
div.option {
margin: -0.429em -0.857em;
padding: 0.429em 0.857em;
}