修改数据源时如何为Angular mat-table应用CSS样式实现字符串高亮

问题根源 #

你的代码存在两个核心问题导致效果不符合预期：

1. Angular默认会对模板中插值的字符串做HTML转义，避免XSS安全风险，你直接拼接的<div>标签不会被解析为DOM元素，只会作为纯文本显示。
2. 代码中存在变量未定义的问题：你声明的数据源是ELEMENT_DATA，但模板和处理逻辑里用的是DUMMY_DATA、DUMMY_DISPLAY，这几个变量没有赋值定义。

修复方案 #

我们可以通过自定义列模板 + innerHTML绑定 + 安全管道的方式实现高亮效果，具体修改如下：

1. 修改ts代码 #

首先补充变量声明，引入Angular的DomSanitizer处理HTML安全，额外写一个可复用的高亮管道方便后续扩展使用：

import {Component, Pipe, PipeTransform} from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

// 自定义高亮管道，可全局复用
@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(text: string, keyword: string, color: string = 'red'): SafeHtml {
    if (!text || !keyword) return text;
    const regExp = new RegExp(keyword, 'g');
    const highlighted = text.replace(regExp, `<span style="color: ${color}">${keyword}</span>`);
    return this.sanitizer.bypassSecurityTrustHtml(highlighted);
  }
}

interface PeriodicElement {
  position: number;
  name: string;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'This word need highlight'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'This need highlight'},
];

@Component({
  selector: 'table-text-column-example',
  styleUrls: ['table-text-column-example.css'],
  templateUrl: 'table-text-column-example.html',
})
export class TableTextColumnExample {
  // 修正变量定义，和模板参数对应
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  DUMMY_DISPLAY = this.displayedColumns;
  DUMMY_DATA = ELEMENT_DATA;
}

修改完成后记得把HighlightPipe加到你对应模块的declarations数组中生效。

2. 修改HTML模板 #

不再用默认的mat-text-column渲染symbol列，自定义列模板，用innerHTML绑定处理后的高亮内容：

<table mat-table [dataSource]="DUMMY_DATA">
  <mat-text-column name="position"></mat-text-column>
  <mat-text-column name="name"></mat-text-column>
  <mat-text-column name="weight"></mat-text-column>

  <!-- 自定义symbol列，实现高亮效果 -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element" [innerHTML]="element.symbol | highlight:'highlight'"> </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="DUMMY_DISPLAY"></tr>
  <tr mat-row *matRowDef="let row; columns: DUMMY_DISPLAY;"></tr>
</table>

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