Angular中如何在mat-row数据修改后高亮该行？

我之前在项目里正好做过一模一样的需求，给你分享几个实用的实现思路，都是基于Angular和Material原生特性，不用额外引入库：

方案一：CSS类+状态标记（最简单直接） #

这个方法核心就是给修改过的行标记一个状态，然后通过CSS类来控制高亮样式。

1. 给数据添加修改状态标记
   如果你用的是自定义接口，直接扩展一个isModified布尔属性；如果是后端返回的数据，可以临时给对象添加这个属性（或者用单独的集合存修改过的ID，后面会说）：

   // 假设你的数据接口是这样的
   interface Product {
     id: number;
     name: string;
     price: number;
     isModified?: boolean; // 新增标记属性
   }
   

2. 在Mat-Row上绑定样式类
   在模板里的mat-row上，根据isModified的值动态添加高亮类：

   <mat-row 
     *matRowDef="let row; columns: displayedColumns;"
     [class.modified-row]="row.isModified"
   ></mat-row>
   

3. 编写高亮样式
   注意要提高选择器优先级，避免被Material的默认样式覆盖：

   .mat-row.modified-row {
     background-color: #fff9c4; /* 柔和的黄色，你可以换成任何颜色 */
     transition: background-color 0.3s ease; /* 可选，添加过渡让颜色变化更自然 */
   }
   

4. 对话框保存后更新状态
   在对话框关闭的回调里，找到对应的行数据，标记为已修改，还可以加个定时器自动取消高亮：

   // 假设对话框返回修改后的数据和对应的索引
   dialogRef.afterClosed().subscribe((updateResult) => {
     if (updateResult) {
       const { updatedData, rowIndex } = updateResult;
       // 更新数据源
       this.dataSource.data[rowIndex] = updatedData;
       // 标记为已修改
       this.dataSource.data[rowIndex].isModified = true;
       
       // 3秒后自动取消高亮（可选）
       setTimeout(() => {
         this.dataSource.data[rowIndex].isModified = false;
         // 触发表格重新渲染，确保样式更新
         this.dataSource.data = [...this.dataSource.data];
         // 或者用表格实例的renderRows()方法：this.table.renderRows();
       }, 3000);
     }
   });
   

方案二：用Angular动画实现流畅过渡效果 #

如果想要更友好的视觉体验，比如高亮色慢慢淡回默认，可以用Angular的动画模块：

1. 定义组件动画
   在组件文件里导入动画模块并定义过渡动画：

   import { trigger, state, style, animate, transition } from '@angular/animations';
   
   @Component({
     selector: 'app-product-table',
     templateUrl: './product-table.component.html',
     styleUrls: ['./product-table.component.css'],
     animations: [
       trigger('rowHighlight', [
         state('modified', style({ backgroundColor: '#fff9c4' })),
         state('default', style({ backgroundColor: 'transparent' })),
         transition('default <=> modified', animate('0.5s ease-in-out')),
       ])
     ]
   })
   

2. 在Mat-Row上绑定动画状态
   把动画绑定到mat-row上，根据isModified切换状态：

   <mat-row 
     *matRowDef="let row; columns: displayedColumns;"
     [@rowHighlight]="row.isModified ? 'modified' : 'default'"
   ></mat-row>
   

3. 保存后更新状态（和方案一一样）
   对话框保存后设置isModified为true，定时器后设为false，动画会自动触发过渡效果。

额外优化：不污染数据源的方式 #

如果不想给原始数据对象添加额外属性，可以用一个Set来存储修改过的行ID：

// 组件里定义一个集合存修改过的ID
modifiedRowIds = new Set<number>();

// 保存后添加ID
dialogRef.afterClosed().subscribe((updateResult) => {
  if (updateResult) {
    this.modifiedRowIds.add(updateResult.updatedData.id);
    setTimeout(() => {
      this.modifiedRowIds.delete(updateResult.updatedData.id);
      this.table.renderRows(); // 触发渲染更新样式
    }, 3000);
  }
});

然后模板里判断：

<mat-row 
  *matRowDef="let row; columns: displayedColumns;"
  [class.modified-row]="modifiedRowIds.has(row.id)"
></mat-row>

这些方案都经过实际项目验证，你可以根据自己的场景选最合适的～

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