垫子自动完成功能-删除用户后从阵列中删除ID

Question

我正在使用此自动完成功能来选择多个用户。

当我选择一个用户时，我使用推将ID存储在变量中。此推送将帮助我保留所有选定用户的ID。

如果您选择一个用户然后想要删除它，则推送将包含该用户的ID：（

是否有一种方法，如果我删除用户，该用户ID将不会出现，也不会从推送输入的数组中删除？

我存储所有ID的位置

 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个用户的ID +被淘汰用户的ID。此已删除的用户ID不应该存在：（

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

或者，您可以创建一个对象数组，将每个条目的名称和ID作为一个对象保存。