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

Question

我正在尝试在单击“-更多-”选项后更新下拉列表中的选项列表。我让它与选项模板和绑定点击事件一起工作我阻止它 stopPropagation() func.

<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();
  }
}

但问题是有时它从第一次加载开始工作，但通常我在“-More-”选项上单击 3 次然后它就可以正常工作。我这是一个错误还是我做错了？也许还有另一个更好的解决方案？谢谢

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

Answer 1

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

绑定了 (click) 事件的 <span> 比包裹得更高的框 (<li>) 小得多，所以当在 span 上准确点击时，如果你点击文本选项“-More-”比它不起作用。

我的解决方案是使用 <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;
}

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

Primeng dropdown prevent overlay close on item select and update the options

angular

primeng

primeng-dropdowns