选中复选框后如何突出显示表格行？角度7

Question

所以让我们跳过表头到我的表主体中。我有一个填充的表：

HTML：

<tbody>
   <tr *ngFor="let e of emails; let i = index">
   <td <input type="checkbox" id="email-checkbox" (change)="addToSelectedList($event, e)"></input></td>
   <td id="subject-{{i}}">{{e.sender}}</td>
   <td id="subject-{{i}}">{{e.subject}}</td>
   <td id="subject-{{i}}">{{e.date}}</td>
</tbody>

当用户选中复选框时，我希望表格的整行显示CSS类。然后，当用户取消选择时，颜色应恢复正常。只是UI内容，以向用户显示已选择电子邮件。我目前有一个空的CSS和.ts文件。

Answer 1

您在此处执行此操作的方式会涉及更多，因为推测您在addToSelectedList事件内部有一些逻辑，该逻辑将根据检查状态添加/删除电子邮件。最简单的方法是在电子邮件实体isSelected上添加一个属性，然后执行以下操作：

Answer 2

不是Angular专家，但是您可以使用绑定到复选框的JS onchange事件来实现这一目标：