如何在mat-table angular 7中突出显示新插入的行

import { Component } from '@angular/core';

export interface TableData {
  id: number;
  name: string;
  age: number;
}

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  tableData: TableData[] = [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Bob', age: 35 }
  ];
}

<table mat-table [dataSource]="tableData">
  <!-- 列定义 -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef>ID</th>
    <td mat-cell *matCellDef="let row">{{row.id}}</td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let row">{{row.name}}</td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef>Age</th>
    <td mat-cell *matCellDef="let row">{{row.age}}</td>
  </ng-container>

  <!-- 行定义 -->
  <tr mat-header-row *matHeaderRowDef="['id', 'name', 'age']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['id', 'name', 'age']; let i = index"
      [ngClass]="{'highlight': i === tableData.length - 1}"></tr>
</table>

.highlight {
  background-color: yellow;
}