Angular 点击按钮时仅修改表格选中行背景色的实现问题

核心逻辑 #

你之前直接选中了id为pool-row的整个表格元素修改样式，所以会触发全表变色。要实现单行点击高亮，利用Angular的数据绑定特性，通过标记选中行的唯一标识、动态绑定样式类即可实现，无需手动操作DOM。

步骤1：修改TS代码 #

首先在组件类中新增存储选中行唯一标识的变量，再调整点击事件逻辑：

// 组件类中新增变量，存储当前选中行的唯一标识
selectedReference: string = '';

getReferenceList(sidebarName: string, reference: IProcess) {
    if (reference && reference.Reference != "") {
        this.selectedProcessList = this._stockService.processList.find(
            (x) => x.Reference === reference.Reference
        ).ChildProcessList;
        this._fuseSidebarService.getSidebar(sidebarName).open();
        // 存储当前选中行的Reference
        this.selectedReference = reference.Reference;
    }
    // 删除原来直接修改整表背景的代码
}

步骤2：修改HTML行样式绑定逻辑 #

调整mat-row的ngClass配置，新增选中状态的样式类绑定：

<tr mat-row *matRowDef="let row; columns: displayedColumns;"
    [ngClass]="{
        'amber-fg': controlReferanceColor(row) == true,
        'selected-row': row.Reference === selectedReference
    }">
</tr>

步骤3：新增高亮样式规则 #

在组件对应的css/scss样式文件中添加高亮类的样式：

.selected-row {
    background-color: #fced49 !important;
}

可选扩展 #

如果需要在关闭侧边栏时取消行高亮，可在侧边栏的关闭回调事件中添加代码：this.selectedReference = ''; 即可自动清除高亮效果。

内容的提问来源于stack exchange，提问作者Rocket Monkey