Angular - 单击按钮后更改表中行的背景颜色

Question

单击我尝试过的按钮后，我想更改所选行的背景颜色，但更改所有行的颜色。这是一个类似的代码。

HTML

<tr *ngFor="let data of (datas$ | async) | filter:authService.filter | paginate: config | orderBy: key : reverse" [ngClass]="{'data-selected':isSelected}">
    <td>{{data.id}}</td>
    <td>{{data.text}}</td>
    <td>
       <a class="mr-3" (click)="delete(data.id)"><i class="fa fa-remove"></i>
            Remove
       </a>
    </td>
</tr>

TS

delete(postId) {
    this.isSelected=true;
    const ans = confirm('TEXT TEXT '+dataid);
    if (ans) {
      this.dataService.deleteData(postId).subscribe((data) => {
        if(data) {
          this.showSuccessDelete();
        } else {
          this.showError();
        }
        this.isSelected=false;
        this.loadDatas();
      });
    }
  }

CSS

.data-selected{
  background-color: #e9eaea;
}

非常感谢

Answer 1

您可以向组件类添加一个属性并将其命名为 selectedRow，这将获取 data.id。

selectedRow: number; 

delete(postId,numeroDeposito) {
this.selectedRow = postId; 
const ans = confirm('TEXT TEXT '+dataid);
if (ans) {
  this.dataService.deleteData(postId).subscribe((data) => {
    if(data) {
      this.showSuccessDelete();
    } else {
      this.showError();
    }
    this.isSelected=false;
    this.loadDatas();
  });
}

}

然后在 tr 标签中使用[ngClass]="{'data-selected': selectedRow === data.id}".