ng-выберите typeahead=true несколько=true, сторона сценария удаления таблеток не работает

#angular #angular-ngselect

Вопрос:

Я использовал ng-select в своем проекте. Это сработало идеально.

Но у меня есть пустая этикетка во время удаления таблетки. Как показано ниже

введите описание изображения здесь

Шаг для репликации:

  • Нажмите на ссылку ниже stackblitz
  • Поиск и выбор двух или более элементов в ng-выберите.
  • Затем нажмите на одну синюю таблетку выше, чтобы удалить один элемент со стороны сценария.

Моя ссылка на stackblitz

Мой пример кода ниже

(HTML-код шаблона)

 <div *ngFor="let data of selectTerm; index as assignedByIndex">
  <span class="badge rounded-pill bg-primary" style="cursor: pointer" (click)="removeSelect(selectTerm, assignedByIndex)">
      {{data.name}}
  </span>
</div>


<h5 class="mt-5">Select:</h5>
<ng-select *ngIf="showSelect" [items]="items$ | async" bindLabel="name" bindValue="id" (change)="select($event)"
  [closeOnSelect]="true" [(ngModel)]="selected" [multiple]="true" [hideSelected]="true" [typeahead]="input$">
</ng-select>
<h5>Typeahead:</h5>
<code #code></code>
 

(Код сценария)

   select(event) {
    this.selectTerm = event;
  }

  removeSelect(element, index) {
    element.splice(index, 1);
    this.selected.splice(index, 1);
    this.showSelect = false;
    setTimeout(() => {
      this.showSelect = true;
    });
  }
 

Если у кого-нибудь есть это решение, пожалуйста, поделитесь со мной!

Комментарии:

1. Можете ли вы еще больше прояснить свою проблему? Выполнение ваших шагов по репликации не воспроизводит ошибку для меня

2. @EricKrg Пожалуйста, проверьте этот ткацкий станок: loom.com/share/343a4ba16e38494e8474f6db5408164e Мне также нужно это решение. Если вы знаете, пожалуйста, поделитесь здесь.