選中復選框時如何突出顯示表格行？ 角 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 上添加一個屬性，然后執行以下操作：

<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>