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

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

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

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

Answer 1

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

绑定的<span>with (click) 事件比包裹得更高 ( ) 的框要小得多<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;
}