首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在angular中触发datalist的点击事件

如何在angular中触发datalist的点击事件
EN

Stack Overflow用户
提问于 2021-03-16 06:19:28
回答 1查看 136关注 0票数 0

我试图在单击angular 9中的另一个元素时触发datalist输入字段上的单击事件,但似乎什么都不起作用。

我尝试过原生元素、renderer2、dispatchEvent,但似乎没有任何东西触发点击事件。

下面是包含示例代码的堆栈闪电战示例

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

下面是示例代码

代码语言:javascript
运行
复制
<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>
代码语言:javascript
运行
复制
  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();
  }
EN

回答 1

Stack Overflow用户

发布于 2021-03-16 07:02:06

输入上的单击事件为focus。因此,请尝试用dummy.focus();替换dummy.click();。我希望它回答了你的问题。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66646460

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档