Question

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

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

希望这对您有帮助...

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>

Answer 2

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

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

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

突出显示已编辑的角表单元格

2 个答案: