是否可以在NgClass指令中使用正则表达式？

Question

This is the row section of my Material Table, I am able to highlight the specified row if I put the exact value after row.name, but what I am trying to do is highlight every row that has the name Rage in it not caring about any characters afterwards, naturally I tried to apply regex expressions.

I have tried to use the ngPattern directive but I could not figure any workable solution

   <mat-row  
       *matRowDef="let row; columns: displayedColumns"
        [ngClass]="{'highlight': selectedRowIndex == row.id, 
                    'move_highlight': row.name === 'Rage.*'}">
   </mat-row>

I was expecting that after I put the .* after Rage that it would detect every row based off the regex expression but instead it did nothing.

Answer 1

That's just a string comparison as you have written it, testing if row.name literally equals 'Rage.*' .

What you really want is:

/^Rage.*/.test(row.name)

I'm not sure you can actually drop a regex into Angular HTML like that, however, so what I'd probably do is create a function in your TypeScript class file like this:

  testForRage(s: string) {
    return /^Rage.*/.test(s);
  }

And then put:

'move_highlight': testForRage(row.name)}">

...into your HTML.