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

【问题标题】：Angular - Change BackGround Color of Row in Table After click the ButtomAngular - 单击按钮后更改表中行的背景颜色
【发布时间】：2020-03-23 21:50:08
【问题描述】：

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

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

非常感谢

【问题讨论】：

你处理isSelected的方式不适合我个人的看法。您可以将其作为数据结构的一部分，当您 *ngFor 您的 html 时，您应该从数据结构中应用它，当单击 delete() 时，您将收到项目的 ID，现在更改数据结构中的状态。 . 这样你可以在重播时保持当前状态... data :[ { name: "joe", selected: false}, ....]

标签： css angular html-table angular8

【解决方案1】：

您还可以采取以下方法：

Working Demo

[class.data-selected]="data.isSelected"

和点击事件。

(click)="data.isSelected = true";

【讨论】：

很好，我不知道是选择了你的答案还是bouchenafa的答案
这完全取决于你。不过不要忘记投票：D
我喜欢你的回答，因为它将样式逻辑从类体移动到模板，为此点赞??
此解决方案可以用于多选，但从问题的上下文来看，我们的朋友在这里想要选择一行，以便在该行被删除时显示。感谢您与我们分享您的解决方案并举例说明。

【解决方案2】：

这可以通过创建一个这样的选定行数组来解决

  deleteList = []

然后当你点击删除推送列表中项目的 id

  delete(id) { 
    this.deleteList.push(id)
  }

然后在模板中使用 ngClass 指令来设置类，如果项目 id 包含在列表中

<tr *ngFor="let data of list" [ngClass]="{'data-selected':deleteList.includes(data.id)}">
   ....
</tr>

demo ??

【讨论】：

【解决方案3】：

而不是声明一个单独的isSelected 变量。你应该引入 is 作为data 对象的属性。例如：

{
    id: 1,
    name: 'AA',
    isSelected: false
}

然后点击你可以在delete函数被data.id作为参数调用时切换它。

deleteMe(id: string) {
    this.data.map(x => x.isSelected = false);
    this.data.find(x => x.id === id).isSelected = true;
}

在html中

<tr *ngFor="let item of data" [ngClass]="{selected: item.isSelected}">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td><button (click)="deleteMe(item.id)">delete me</button></td>
</tr>

这是example的最低要求。

【讨论】：

【解决方案4】：

您可以使用条件样式来实现这一点。

<div [className]="( checkSelectedRow(i) ? 'example-class' : 'other-class'"></div>

在打字稿文件中：

checkSelectedRow(rowNumber) : boolean {  
    for(int j=0; j<rows.length; j++){
       if(j==i){
         rows[i]["selected"]=true; return true;
       }; 
    } 
    return false;
}

【讨论】：

【解决方案5】：

你可以给你的组件类添加一个属性并命名为 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}"。

【讨论】：

很好的解决方案，非常感谢，我不知道是选择你的答案还是@Adrita Sharma 的答案