html - angular2 EventTarget 没有getAttribute方法

问题描述

问 题

1.项目中要做一个元素周期表，html结构大致如下

   <ul  id="periodicTable"  (click)="elementClick($event)">
      <li  data-name="H"></li>
      <li  data-name="He"></li>
      ......
   </ul>
   

2.PeriodicTable组件如下：

   
  
import {Component,Output,EventEmitter} from "@angular/core"

@Component({
selector:"periodic-table",
templateUrl:"app/components/periodic-table.html",
styleUrls:["app/components/periodic-table.css"]

})
export class PeriodicTable{
@Output() periodicTableClick:EventEmitter<string>=new EventEmitter<string>();
elementClick=function(event:Event){

    let target = event.target || event.srcElement ;
    if(target){
       this.periodicTableClick.emit(target.getAttribute("data-name"))

    }
    return false;
}

}

3.元素周期表的事件绑定我用了事件委托的方法，把事件绑在了元素li的父元素ul上,通过e.target.getAttribute("data-name")得到元素值。问题是把ts编译成js的过程中，会报EventTarget对象没有getAttribute（）方法错误，求问我该怎么得到li的自定义data-name属性

解决方案

把EventTarget对象做一下强制类型转换就行了(<HTMLElement>event.target).getAttribute("data-name");谢谢大家。

这篇关于html - angular2 EventTarget 没有getAttribute方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！