Angular 7 - 从数组中拼接和删除（下拉值）答案

【问题标题】：Angular 7 - Splice and Remove (Dropdown Values) from ArrayAngular 7 - 从数组中拼接和删除（下拉值）
【发布时间】：2019-11-08 19:13:18
【问题描述】：

我有一个包含多个选项的打开下拉菜单。我用两个创建了一个简单的pickList。我正在使用拼接以在按钮后从数组中删除所选值，但选择多个时，拼接似乎删除了所选的所有内容。

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

问题是选择波士顿和迈阿密，然后单击向左箭头删除，删除除选定的之外的所有内容。我以前使用过 splice，但我不记得它忽略了数组中的项目。

我的代码组件如下所示：

<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。

【问题讨论】：

标签： javascript arrays angular

【解决方案1】：

为了达到预期的效果，改变你的removeThese方法如下

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

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

【讨论】：

我花了一点时间才意识到这是索引的问题。谢谢，我几乎放弃后使用了您的示例，并且效果很好。

【解决方案2】：

Splice 在这里是错误的工具。你想要做的是filter out 任何被选择的元素，如下所示：

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

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

【讨论】：