在多选Angular中获取最后点击的元素

Question

我试图在多选中获取最后单击的选项，无论该选项是选中还是未选中。 问题是选择不是通过模板，而是通过 TS 动态安装的。

我尝试在创建选项时添加 vanilla JS 事件侦听器，但不起作用。实际上我可以得到所有选定的元素，但是我失去了未选定的选项，我不能完全得到新的选定元素。

我的 HTML

<tr *ngFor="let communityLine of communityLines">
      <td>{{communityLine.name}}</td>
      <td>{{communityLine.instrument.name}}</td>
      <td>{{communityLine.param.name}}</td>
      <td>{{communityLine.contextSource.name}}</td>
      <td>{{communityLine.sampleType.name}}</td>
      <td>{{communityLine.value}}</td>
      <td>

        <select multiple [id] ="communityLine.apiKey" (change)="eventGetChange(communityLine, $event)" [(ngModel)]="nodeKey">
        </select>
      </td>
    </tr>

我的 TS 功能

private eventGetChange(commLineKey, event) {
    console.log(this.nodeKey);
    console.log(commLineKey);
    console.log(event.target.value)

我挂载选择的 TS 方法有点复杂，因为我需要显示所有节点（存储在 this.allNodes var 中）但选择其他数组中的节点（nodesInRelation var）。

private mountSelect(nodesInRelation: Node[], lineApiKey: String): void {
    let select = <HTMLSelectElement>document.getElementById(lineApiKey);
    let copy = this.allNodes;
    for (let node of nodesInRelation) {
      copy.forEach((item, index) => {
        if (item.name === node.name) copy.splice(index, 1);
      });
    }
    for (let node of nodesInRelation) {
      let newoption = new Option(node.name, node.apiKey, null, true);
      select.add(newoption);
    }

    for (let node of copy) {
      let newoption = new Option(node.name, node.apiKey, null, false);
      select.add(newoption);
    }
    M.updateTextFields();
    M.AutoInit();
  }

在 eventGetChange 函数的第一个 console.log 中，我得到所有当前选定的值，在第二个中，我得到键并且没问题，在第三个中，我只得到框中的第一个选定元素。

我只想要最后一次点击、选择或取消选择。

谢谢。

Answer 1

您似乎无缘无故地放弃了 Angular 并选择了直接 DOM 操作。 Angular 完全能够以编程方式填充选项列表。它可能看起来像

      <td>
        <select multiple [id] ="communityLine.apiKey" [(ngModel)]="nodeKey">
            <option *ngFor="let option of optionList; let i = index"
               [value]="option" (click)="eventGetChange(option)">{{ option }}
            </option>
        </select>
      </td>

optionList: any[];

private mountSelect(nodesInRelation: Node[], lineApiKey: String): void {
// populate optionList here
}

private eventGetChange(commLineKey) {
// the clicked option is available here
}

Answer 2

如果 this.nodeKey 像你说的那样存储一个包含所有当前选定值的数组，你可以简单地这样做：

this.nodeKey[this.nodeKey.length - 1]

它会给你 nodeKey 数组中的 las 值