单击后从选择中删除 Angular 5 选项答案

【问题标题】：Angular 5 remove option from select after click单击后从选择中删除 Angular 5 选项
【发布时间】：2018-03-05 12:32:39
【问题描述】：

我有两个数组：

availableTargets: [ {id: 1, name: "Target 1"}, {id: 2, name: "Target 2"}, {id: 3, name: Target 3" ];
selectedTargets: [];

我创建了一个多选列表：

<select multiple>
    <option *ngFor="let target of availableTargets" [value]="target .id" (click)="AddTarget($event)">{{target.name}}</option>
 </select>

当用户单击一个选项时，我想将“目标”添加到 selectedTarget 数组并将其从 availableTargets 数组中删除。

public AddTarget(event) {
    let id = event.target.id;
    this.availableTargets = this.availableTargets .filter(function (el) { return el.id != id });
    this.selectedTargets.push(event.target.id);
  }

从 availableTarget 数组中删除一个元素后，我的多选列表没有更新。如何触发？

【问题讨论】：

标签： arrays angular select

【解决方案1】：

你可以通过简单地使用索引来做到这一点

模板端：

<select multiple>
    <option *ngFor="let target of availableTargets; let i = index;" [value]="target .id" (click)="AddTarget(i)">{{target.name}}</option>
</select>

组件端：

  public AddTarget(index) {
    this.selectedTargets.push(this.availableTargets[index]);
    this.availableTargets.splice(index, 1);
  }

WORKING DEMO

【讨论】：