Angular 点击行内按钮时仅修改对应行背景色的实现问题

问题原因 #

你给整个<table>元素绑定了id="pool-row"，调用document.getElementById('pool-row')修改的是整个表格的背景色，所以所有行都会变黄，同时直接操作DOM也不符合Angular的数据驱动开发规范。

修复方案 #

步骤1：修改TS代码 #

在组件类中新增变量存储已操作行的唯一标识，同时修改getReferenceList方法，移除直接操作DOM的逻辑：

// 组件类新增变量，存储已点击行的唯一Reference值
selectedReferences: 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存入已操作列表，避免重复添加
        if (!this.selectedReferences.includes(reference.Reference)) {
            this.selectedReferences.push(reference.Reference);
        }
        // 删除原来直接修改table背景的代码
        // document.getElementById('pool-row').style.backgroundColor = '#fced49';
    }
}

如果你需要点击第二次取消高亮，可以把存入逻辑改成切换逻辑：

const idx = this.selectedReferences.indexOf(reference.Reference);
if (idx > -1) {
    this.selectedReferences.splice(idx, 1);
} else {
    this.selectedReferences.push(reference.Reference);
}

步骤2：修改HTML代码 #

修改行的[ngClass]绑定，根据已操作列表判断是否添加高亮样式，同时可以移除table上无用的id="pool-row"：

<!-- 原table标签可删除id属性 -->
<table mat-table [dataSource]="dataSource" matSort class="stock-table">

<!-- 修改行的ngClass绑定 -->
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
    [ngClass]="{
        'amber-fg': controlReferanceColor(row) == true,
        'highlight-yellow': selectedReferences.includes(row.Reference)
    }">
</tr>

步骤3：添加高亮样式 #

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

.highlight-yellow {
    background-color: #fced49 !important;
}

注意：如果Reference字段不是全局唯一的，可以替换为行数据的其他唯一业务主键，避免多个行被同时高亮。

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