Выделите Angular ячейки таблицы, которые были отредактированы

Question

У меня есть таблица в приложении Angular, которая показывает различные часы в месяце, и пользователь может редактировать эти часы. Они могут редактировать несколько часов в go.

. Мне нужно найти способ, где бы ни редактировалась ячейка таблицы, которая выделялась и оставалась такой, возможно, добавив класс 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>

TS -

  getHours($event) {
    console.log($event );
    if (! $event.target.classList.contains('editedHours')) {
      console.log("entered classlist");
      $event.target.classList.add('editedHours')
    }
  }

CSS

.editedHour{
    border-color: green;
}

Answer 1

В вашем HTML установите [ngStyle] для вызова метода, который возвращает объект, отформатированный в соответствии с вашими желаемыми стилями.

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

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

Answer 2

Надеюсь, это поможет ...

app.component.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>