Javascript 在mattable中为每行指定随机颜色

我试图在mattable中实现一个功能，即定义一个颜色数组，每个颜色随机显示在每个mattable行的背景中。我不知道如何实现这一点，但我想也许可以通过样式绑定或类似的方式来实现。我尝试过使用css，但这似乎是一个非常糟糕的主意，这是我的mattable代码

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Checkbox Column -->
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox (change)="$event ? masterToggle() : null"
                    [checked]="selection.hasValue() && isAllSelected()"
                    [indeterminate]="selection.hasValue() && !isAllSelected()">
      </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox (click)="$event.stopPropagation()"
                    (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)">
      </mat-checkbox>
    </td>
  </ng-container>

  <!-- Position Column -->
  <ng-container matColumnDef="srNo">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element; let i = index"> {{i + 1}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="routes">
    <th mat-header-cell *matHeaderCellDef> Routes </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="percentage">
    <th mat-header-cell *matHeaderCellDef> </th>
    <td mat-cell *matCellDef="let element"><mat-progress-bar style="margin-top: 20px;" mode="determinate" value="{{element.percentage}}"></mat-progress-bar>
      <div style="position:relative; top: -20px;">
        {{ element.percentage }}%
      </div>
    </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="capacity">
    <th mat-header-cell *matHeaderCellDef  style="text-align: center;"> Total Parcels </th>
    <td mat-cell *matCellDef="let element"  style="text-align: center;"> {{element.totalParcels}} </td>
  </ng-container>

  <ng-container matColumnDef="price">
    <th mat-header-cell *matHeaderCellDef  style="text-align: center;"> Total Price </th>
    <td mat-cell *matCellDef="let element"  style="text-align: center;"> {{element.totalPrice | currency: 'Rs.'}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
      (click)="selection.toggle(row)">
  </tr>
</table>

我需要知道如何为每一行分配随机颜色。现在我的床垫只有三行，第一行和第三行显示为绿黄色，第二行显示为红色。

我就是这样做的

heroes = [1,2,3,4,5,6,7,8,9];
bgColor() {

}

getRandomColor2() {
  var length = 6;
  var chars = '0123456789ABCDEF';
  var hex = '#';
  while(length--) hex += chars[(Math.random() * 16) | 0];
  return hex;
}

getRandomColor() {
  var color = Math.floor(0x1000000 * Math.random()).toString(16);
  return '#' + ('000000' + color).slice(-6);
}

在我的html文件中

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
                (click)="selection.toggle(row)" [ngStyle]="{'background-color': getRandomColor()}">
  </tr>

我确实解决了这个问题，但当我向上或向下滚动页面时，颜色一直在变化。我怎样才能阻止他们改变？看起来，当我滚动时，即使mattable中的数据是静态的，表仍会继续呈现

我就是这样做的

heroes = [1,2,3,4,5,6,7,8,9];
bgColor() {

}

getRandomColor2() {
  var length = 6;
  var chars = '0123456789ABCDEF';
  var hex = '#';
  while(length--) hex += chars[(Math.random() * 16) | 0];
  return hex;
}

getRandomColor() {
  var color = Math.floor(0x1000000 * Math.random()).toString(16);
  return '#' + ('000000' + color).slice(-6);
}

在我的html文件中

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
                (click)="selection.toggle(row)" [ngStyle]="{'background-color': getRandomColor()}">
  </tr>

---

我确实解决了这个问题，但当我向上或向下滚动页面时，颜色一直在变化。我怎样才能阻止他们改变？看起来，当我滚动时，即使mattable中的数据是静态的，表仍会继续呈现

为什么不在数据源中包含一个新属性：bgColor并在表中使用

在典型的例子中

dataSource = ELEMENT_DATA.map(x => ({
    ...x,
    bgColor: this.getRandomColor()
  }));
  getRandomColor() {
    var color = Math.floor(0x1000000 * Math.random()).toString(16);
    return "#" + ("000000" + color).slice(-6);
  }

及

---

请参见

为什么不在数据源中包含一个新属性：bgColor并在表中使用

在典型的例子中

dataSource = ELEMENT_DATA.map(x => ({
    ...x,
    bgColor: this.getRandomColor()
  }));
  getRandomColor() {
    var color = Math.floor(0x1000000 * Math.random()).toString(16);
    return "#" + ("000000" + color).slice(-6);
  }

及

---

请参见

任何帮助都将受到感谢。