如何以角度触发数据列表的点击事件

问题描述

当单击 angular 9 中的另一个元素时，我试图在数据列表输入字段上触发单击事件，但似乎没有任何效果。

我已经尝试过原生元素、renderer2、dispatchEvent，但似乎没有什么能触发点击事件。

这是带有示例代码的堆栈闪电战示例

https://stackblitz.com/edit/datalist-dummy-test

这是示例代码

<input
  #myDiv
  type="text"
  id="test"
  list="codes"
  [(ngModel)]="codeValue"
  (change)="saveCode($event)"
/>
<datalist id="codes">
  <option *ngFor="let c of codeList" [value]="c.name">{{c.name}}</option>
</datalist>
<span (click)="testfn()"> test<span></span></span>

  public codeValue: string;

  codeList = [
    { id: 1,name: "Angular 2+" },{ id: 2,name: "Angular 4" },{ id: 3,name: "Angular 5" },{ id: 4,name: "Angular 6" },{ id: 5,name: "Angular 7" }
  ];

  @ViewChild("myDiv") myDiv: ElementRef<HTMLElement>;

  constructor(private ref: ElementRef) {}

  public saveCode(e): void {
    let name = e.target.value;
    let list = this.codeList.filter(x => x.name === name)[0];
    console.log(list.id);
  }

  testfn() {
    debugger;
    console.log("test");
    let dummy = this.ref.nativeElement.querySelector("#test");
    dummy.click();
    dummy.dispatchEvent(new Event("click"));
    let el: HTMLElement = this.myDiv.nativeElement;
    el.click();
  }

解决方法

输入上的点击事件是 focus。 所以尝试用 dummy.click(); 替换 dummy.focus();。 我希望它回答了您的问题。