在鼠标悬停时突出显示角度表格单元格内容并单击

【问题标题】：Highlight angular table cell content on mouseover and click在鼠标悬停时突出显示角度表格单元格内容并单击
【发布时间】：2019-01-26 09:17:35
【问题描述】：

我试图弄清楚当我将鼠标悬停和/或单击它时如何突出显示角度表格单元格的文本/内容

我在这里浏览了 Angular 文档 - https://angular.io/guide/attribute-directives。但这似乎很麻烦。有任何优化或简单的方法来实现这一点吗？

<tbody>
    <tr *ngFor="let venue of venues[0]">
      <td (click)="onVenNameClick()" onMouseEnter() ></td>
      <td>{{venue.address}}</td>
      <td>{{venue.description}}</td>
      <td>{{venue.isactive}}</td>
      <td>{{venue.userid}}</td>
      <td>{{venue.displayid}}</td>
    </tr>
  </tbody>

【问题讨论】：

查看angular.io/api/common/NgClass

标签： html css angular

【解决方案1】：

我更喜欢在 Angular 中为这些特性使用 CSS 类，如果你必须为很多组件使用相同的功能，则会创建指令

handleClickEvent() {
  // perform click operation
}

.custom-venue td:hover {
  cursor: pointer;
  background: yellowgreen;
  font-weight: bold;
}

.custom-venue td:focus {
  outline: none;
  background: yellowgreen;
  font-weight: bold;
}

<tbody>
    <tr class="custom-venue" *ngFor="let venue of venues[0]">
        <td (click)="handleClickEvent()">Handle Click</td>
        <td>{{venue.address}}</td>
        <td>{{venue.description}}</td>
        <td>{{venue.isactive}}</td>
        <td>{{venue.userid}}</td>
        <td>{{venue.displayid}}</td>
    </tr>
</tbody>

【讨论】：

这有帮助。谢谢！