Mat autocomplete - удаление идентификатора из массива при удалении пользователя

Question

Я использую это автозаполнение, чтобы иметь возможность выбрать более одного пользователя.

Когда я выбираю пользователя, я сохраняю идентификаторы в переменной, используя pu sh. Этот pu sh поможет мне сохранить идентификаторы всех выбранных пользователей.

Если вы выберете пользователя, а затем захотите удалить его, pu sh будет содержать идентификатор этого пользователя: (

Есть ли способ, что, если я удаляю пользователя, этот идентификатор пользователя не будет отображаться или удаляться из массива, передаваемого pu sh?

Где я храню все идентификаторы

 var a = (this.nameIdMap.get(event.option.viewValue));
  this.allIDS.push(a);
   var c = this.allIDS; 
    var b = c.filter(function(value, index){ return c.indexOf(value) == index });
    console.log(b)

DEMO

Код

 remove(fruit: string): void {
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }

 selected(event: MatAutocompleteSelectedEvent): void {
  var a = (this.nameIdMap.get(event.option.viewValue));
  this.allIDS.push(a);
   var c = this.allIDS; 
    var b = c.filter(function(value, index){ return c.indexOf(value) == index });
    console.log(b)
  this.fruits.push(event.option.viewValue);
  this.fruitInput.nativeElement.value = '';
  this.fruitCtrl.setValue(null);
}

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
  }


<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList>
    <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

Проблема

Как видите, я выбрал 3 пользователей, а затем удалил 1. Всего выбрано 2 пользователя, но в массиве у меня есть идентификаторы 2 выбранных пользователей + идентификатор исключенного пользователя. . Этот удаленный идентификатор пользователя не должен присутствовать: (

Answer 1

Вам просто нужно удалить тот же индекс из this.allIDs, что и из this.fruits

remove(fruit: string): void {
  const index = this.fruits.indexOf(fruit);
  if (index >= 0) {
    this.fruits.splice(index, 1);
    this.allIDS.splice(index, 1);
  }
}

В качестве альтернативы вы можете создать массив объектов, который содержит имя и идентификатор каждой записи как один объект.