Angular - 单击按钮后更改表中行的背景颜色
Posted
技术标签:
【中文标题】Angular - 单击按钮后更改表中行的背景颜色【英文标题】:Angular - Change BackGround Color of Row in Table After click the Buttom 【发布时间】:2020-03-23 21:50:08 【问题描述】:单击按钮后我想更改所选行的背景颜色 我试过但改变了所有行的颜色。 这是一个类似的代码。
<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, ....] 【参考方案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 的答案以上是关于Angular - 单击按钮后更改表中行的背景颜色的主要内容,如果未能解决你的问题,请参考以下文章