单击后，选择Angular 5删除选项

Question

我有两个数组：

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>

当用户单击某个选项时，我想将“Target”添加到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数组中删除元素后，我的多选列表不会更新。我该如何触发？

Answer 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