angular2 表格点击选中与鼠标悬浮

HTML

                
                    {{i+1}}
                    {{option.templateTitle}}
                    {{option.descriiption}}
                    {{option.createUserName}}
                    {{option.createTime}}
                    {{option.updateUserName}}
                    {{option.lastUpdateDate}}

TS

 //  表格鼠标移出事件
    outTable() {
        this.flag2 = -1;
    }
//表格的行悬浮事件 
    gotoCover(value) {
        this.flag2 = value;
        if (this.flag2 == this.flag) {
            this.flag2 = -1;
        }
    }
// 表格的行点击事件
    choose(value, value1, value2) {
        this.elementName3 = "";
        this.elementId3 = "";
        this.templateId = value;
        this.gvdpTemplateDetail = value1;
        this.flag = value2;      //得到选中行号
        this.flag2 = -1;
        this.importDisabled = false;
        this.getGVDPdata();
    }

CSS

//点击样式
.clickStyle{
    background-color: #186BA0;
    color: white;
    .blue{
      color: white;
    }
  }
//悬浮样式
  .overStyle{
    background-color: rgba(220,220,220,0.5);
  }

注释
根据点击或悬浮事件得到选中行号，根据行号用[ngClass]绑定样式，若点击样式和悬浮样式同时起作用，把flag2=-1,去掉悬浮样式。