如何解决如何以角度触发数据列表的点击事件
当单击 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();
。
我希望它回答了您的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。