Javascript 高亮显示已编辑的角度表格单元格

我在Angular应用程序中有一个表格，显示了一个月内的各种小时数，用户可以编辑这些小时数。 他们可以一次编辑多个小时

我需要找到一种方法，无论哪个表格单元格被编辑，都会高亮显示并保持这种状态，可能会向该单元格添加一个css类

我尝试使用classList，但没有成功，ngClass也失败了。请帮忙

表:

HTML-

  <tbody>
    <tr *ngFor="let emp of tableData index as index"
        <td class="hoursAlignment" *ngIf="editingHours(index, j)"
          [ngClass]="{'changeBorder':(changBorder === true)}">
          <input style="width:40px;height:25px;" class="editingHour" type="text"
            [(ngModel)]="emp['allocationHours'][attribute.key]['workHours']"
            (change)="getHours($event)"">
        </td>
    </tr>
  </tbody>

CSS

希望这有助于

应用程序组件.ts

usersList: User[] = [
 {name: 'AAA', email: 'aa@aa.com', place: 'Mysore'},
 {name: 'BBB', email: 'bb@bb.com', place: 'Bangalore'},
 {name: 'CCC', email: 'cc@cc.com', place: 'Maddur'},
];

getStatus(form, index) {    
  if(form.form.controls && form.form.controls[`name${index}`]) {
   if(form.form.controls[`name${index}`].dirty || 
    form.form.controls[`email${index}`].dirty || 
     form.form.controls[`place${index}`].dirty) {
      return 'gold';
   }
 }
}

onChange(form) {
 console.log(form.form.controls);    
}

app.component.html

<div class="container">
 <form class="text-center" #form="ngForm">
   <table class="table">
     <thead>
       <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Place</th>
       </tr>
    </thead>
  <tbody>
    <tr *ngFor="let user of usersList; let i = index" style="margin-bottom: 20px;" 
      [style.background-color]="getStatus(form, i)">
      <td>
        <input class="form-control" name="name{{i}}" [(ngModel)]="user.name" (change)="onChange(form)">
      </td>
      <td>
        <input class="form-control" name="email{{i}}" [(ngModel)]="user.email" (change)="onChange(form)">
      </td>
      <td>
        <input class="form-control" name="place{{i}}" [(ngModel)]="user.place" (change)="onChange(form)">
      </td>
    </tr>
  </tbody>
</table>

名称
电子邮件
放置

---

在HTML中，将[ngStyle]设置为调用一个方法，该方法返回格式化为所需样式的对象

<p [ngStyle]="getStyles()"></p>

---

你能用小提琴演奏这首曲子吗data@bestinamir-谢谢，但是运气不好。

<div class="container">
 <form class="text-center" #form="ngForm">
   <table class="table">
     <thead>
       <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Place</th>
       </tr>
    </thead>
  <tbody>
    <tr *ngFor="let user of usersList; let i = index" style="margin-bottom: 20px;" 
      [style.background-color]="getStatus(form, i)">
      <td>
        <input class="form-control" name="name{{i}}" [(ngModel)]="user.name" (change)="onChange(form)">
      </td>
      <td>
        <input class="form-control" name="email{{i}}" [(ngModel)]="user.email" (change)="onChange(form)">
      </td>
      <td>
        <input class="form-control" name="place{{i}}" [(ngModel)]="user.place" (change)="onChange(form)">
      </td>
    </tr>
  </tbody>
</table>

<p [ngStyle]="getStyles()"></p>

getStyles(){
 return {
   'background-color': 'rebeccapurple',
   'color': 'seashell'
 }
}