Как выделить строку таблицы, когда установлен флажок? Angular 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, когда пользователь устанавливает флажок. И тогда цвет должен go вернуться к нормальному состоянию, когда пользователь отменяет выбор. Просто пользовательский интерфейс, чтобы показать пользователю, что электронная почта была выбрана. В настоящее время у меня есть пустой файл CSS и .ts.

Answer 1

То, как вы это сделали, более сложное, потому что, вероятно, у вас есть логика c внутри события addToSelectedList, которое добавит / удалит электронное письмо в зависимости от отмеченного состояния. Самый простой способ - добавить свойство для объекта электронной почты isSelected и сделать следующее:

<input  ... [checked]="e.isSelected" >

В свой tr добавить привязку ngclass, как это предлагают другие, следующим образом:

<tr [ngClass]="{ 'selectedcssclass' : e.isSelected }"...

Другое наблюдение в вашем коде - нет закрывающего tr, который должен обернуть все tds.

Answer 2

Не эксперт Angular, но вы можете добиться этого, используя JS onchange событие, привязанное к вашему флажку:

$(".box").on("change", function() {
   $(this).parents("tr").toggleClass("highlight");
});

.highlight {
  background-color: #ffff00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Label 1</td>
    <td><input type="checkbox" class="box"/></td>
  </tr>
  <tr>
    <td>Label 2</td>
    <td><input type="checkbox" class="box"/></td>
  </tr>
</table>