angular-material - 如何获取点击的 mat-button 而不是 mat-button 包装器的 id？

Question

我正在使用 Material 我的设计 Angular7 项目。垫子按钮上有一个点击事件。

  itemclick(event: Event) {
 //to know the id of clicked element,ie button
 let elementId: string = (event.target as Element).id;
 console.log(elementId);
 }

这是 HTML

<button mat-button color="primary" id="test1" (click)="itemclick($event)" style="outline: none">Property1</button>

但我并不总是得到 id，因为 (event.target) 在 mat-button(id=test1 的情况)和 mat-button-wrapper(id 为空的情况)之间不断随机变化。

如何解决这个问题？
提前致谢。

Answer 1

将您的功能替换为:

HTML:

<button mat-button #test color="primary" id="test1" (click)="itemclick(test)" style="outline: none">Property1</button>

TS:

itemclick(event) {
   console.log(event._elementRef.nativeElement.id)
}

StackBlitz