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

Answer 1

为了获得预期的结果，请更改您的方法，如下所示删除这些方法

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可以通过删除选择数组中存在的所有值来一次性完成工作。