Angular 7-从阵列​​拼接和移除（下拉值）

Question

我有一个带有多个选项的开放式下拉菜单。我用两个创建了一个简单的pickList。单击按钮后，我正在使用拼接从数组中删除选定的值，但是当选择多个时，拼接似乎会删除除选中的值之外的所有值。

例如：在我右边的列表中-如果我选择了旧金山，迈阿密，波士顿和拉斯维加斯，则将它们移到右边的选定框中。这很完美。

问题是选择“波士顿和迈阿密”，然后单击向左箭头将其删除，除去所选的所有箭头。我以前曾经使用过splice，但是我不记得它忽略了array中的项目。

我的代码组件如下：

<select [(ngModel)]="foundLocations" multiple="multiple">
    <option *ngFor="let locOption of locations" [ngValue]="locOption" >
      {{ locOption }}
    </option>
</select>
<div class="selectButtons">
  <button (click)="selectThese()">></button>
    <br/>
  <button (click)="removeThese()"><</button>
</div>
<select [(ngModel)]="selectedLocations" multiple="multiple">
    <option *ngFor="let chosen of pickedLocationItems" [ngValue]="chosen" >
      {{ chosen }}
    </option>
</select>

在我的组件中看起来像：

  foundLocations: any;
  selectedLocations: any = [];
  pickedLocationItems: any = [];

  locations: any = ["San Francisco", "Seattle", "Las Vegas", "Toronto", "Boston", "Miami", "Altantic City"];

  selectThese() {
    for (var i = 0; i < this.foundLocations.length; i++) {
      this.checkSelLocation(this.foundLocations[i]);
    }
  }

  checkSelLocation(x: any) {
    console.log("Check sel locations");
    console.log(x);
    this.pickedLocationItems.push(x);
  }

  removeThese() {
    for (var g = 0; g < this.selectedLocations.length; g++) {
      this.pickedLocationItems.splice(g, 1); 
    }
  }

我有一个Stackblitz example here。

Answer 1

要获得预期结果，请按以下方式更改 removeThese 方法

1. 您选择拼接的索引是错误的（因为g的索引从0开始，而实际选择的位置可能不是以-0开头）
2. 首先通过 indexOf
查找索引
3. 使用该索引进行拼接

removeThese() { for (var g = 0; g < this.selectedLocations.length; g++) { this.pickedLocationItems.splice(this.pickedLocationItems.indexOf(this.selectedLocations[g]), 1); } }

工作代码示例以供参考-https://stackblitz.com/edit/angular-xwwevl?file=src/app/app.component.ts

Answer 2

此处的接合是错误的工具。您想要做的是filter删除所有这样选择的元素：

removeThese() {
    this.pickedLocationItems = this.pickedLocationItems.filter(item => !this.selectedLocations.includes(item));
  }

Array.splice删除了从索引开始的一系列元素，因此要使用该元素，您需要找到每个选定项目的索引并拼接该索引，因为选择可能不连续。使用它的方式是，从0循环到选择数组的长度，该长度与所选元素的索引不对应。使用Array.filter可以通过删除选择数组中存在的所有值来一次性完成工作。