Блог

Я использовал 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;
    });
  }
 

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