Выпадающий список Primeng предотвращает закрытие оверлея при выборе элемента и обновляет параметры

Я пытаюсь обновить список параметров в раскрывающемся списке после выбора параметра -More-. Я получаю его работу с шаблоном для параметров и привязкой события щелчка, я предотвращаю его функцию stopPropagation ().

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

Но проблема в том, что иногда он работает с первой загрузки, но обычно я нажимаю 3 раза на параметр -More-, и тогда он работает правильно. Это баг или я не так делаю? может есть другое решение получше? Спасибо

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


angular primeng primeng-dropdowns
person user1844923    schedule 13.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Итак, я обнаружил проблему, почему это иногда не работало.

<span> с привязанным событием (щелчок) намного меньше, чем поле, обернутое выше (<li>), поэтому при щелчке точно по диапазону это работает, если вы щелкнете немного справа от параметра текста -Больше-, чем это не сработает.

Решение для меня - использовать <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;
}
person user1844923    schedule 13.07.2020