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

HTML

<tbody (mouseout)="outTable()">
                <tr *ngFor = "let option of GVDPdata;let i = index" [ngClass]="{'clickStyle':i==flag,'overStyle':i==flag2}" (click)="choose(option.templateId,option.templateTitle,i)" (mouseover)="gotoCover(i)" style="cursor:pointer;">
                    <td>{{i+1}}</td>
                    <td>{{option.templateTitle}}</td>
                    <td>{{option.descriiption}}</td>
                    <td>{{option.createUserName}}</td>
                    <td>{{option.createTime}}</td>
                    <td>{{option.updateUserName}}</td>
                    <td>{{option.lastUpdateDate}}</td>
</tr>
</tbody>

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,去掉悬浮样式。