如何在Angular Material数据表加载时按条件高亮指定行？

没问题，我来帮你搞定组件加载时根据条件高亮行的需求～ 你现在已经实现了点击高亮，只需要在组件初始化时自动匹配条件并设置高亮状态就可以了，下面分步骤来改：

1. 修正数据结构（可选但必要） #

你当前的Element接口里没有id字段，但模板里用了selectedRowIndex == row.id，这会导致点击高亮也不生效。先补全接口和数据：

export interface Element {
  id: number; // 新增id字段，或者用position替代也可以
  name: string;
  position: number;
}

const ELEMENT_DATA: Element[] = [
  {id: 1, position: 1, name: 'Hydrogen' },
  {id: 2, position: 2, name: 'Helium' },
  {id: 3, position: 3, name: 'Lithium'}
];

如果不想加id，也可以直接用position作为标识，后面的代码里把row.id换成row.position就行。另外注意：你的HTML模板最后多了一个</mat-table>标签，要删掉，不然会触发DOM错误，正确的模板结尾只有</div>。

2. 组件中添加初始化逻辑 #

在组件类里实现OnInit钩子，在组件加载时自动找到符合条件的行（比如name包含Helium），并设置高亮状态：

import { Component, OnInit } from '@angular/core'; // 导入OnInit
// ...其他必要的导入（比如MatTableDataSource等）

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit { // 实现OnInit接口
  selectedRowIndex: number = -1;
  displayedColumns = ['position', 'name'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

  ngOnInit(): void {
    // 组件加载完成后，查找name包含"Helium"的行
    const targetRow = this.dataSource.data.find(row => row.name.includes('Helium'));
    if (targetRow) {
      this.selectedRowIndex = targetRow.id; // 如果你用position当标识，就写targetRow.position
    }
  }

  highlight(row) {
    this.selectedRowIndex = row.id;
  }
}

3. 确保高亮样式生效 #

你的table-basic-example.css文件里需要有.highlight类的样式，比如：

.highlight {
  background-color: rgba(0, 123, 255, 0.1); /* 浅蓝色高亮，你可以自定义颜色 */
}

拓展：高亮多个符合条件的行 #

如果你的需求是高亮所有满足条件的行（比如所有名字带"ium"的行），可以把单值的selectedRowIndex换成数组，修改如下：

组件代码修改： #

// 把selectedRowIndex换成数组存储多个行ID
selectedRowIds: number[] = [];

ngOnInit(): void {
  // 筛选出所有名字包含"ium"的行，提取它们的ID存入数组
  this.selectedRowIds = this.dataSource.data
    .filter(row => row.name.includes('ium'))
    .map(row => row.id);
}

// 点击行时切换该行的高亮状态
highlight(row) {
  const idIndex = this.selectedRowIds.indexOf(row.id);
  if (idIndex > -1) {
    // 已高亮，取消高亮
    this.selectedRowIds.splice(idIndex, 1);
  } else {
    // 未高亮，添加高亮
    this.selectedRowIds.push(row.id);
  }
}

模板修改： #

把<mat-row>的ngClass判断改成数组包含判断：

<mat-row 
  *matRowDef="let row; columns: displayedColumns;" 
  [ngClass]="{'highlight': selectedRowIds.includes(row.id)}" 
  (click)="highlight(row)"
></mat-row>

这样就能实现加载时自动高亮所有符合条件的行，同时保留点击切换高亮的功能啦～

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