Question

我正在尝试以这样一种方式实现可匹配的功能，即定义了一系列颜色，并且每种颜色随机出现在每个可匹配行的背景中。我不确定如何实现此功能，但我认为也许可以通过样式绑定或类似方法来完成。我尝试使用CSS，但这似乎是一个非常糟糕的主意，因为这是我的可移植代码

<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>

css代码

.mat-row:nth-child(even){
  background-color:red;
}

.mat-row:nth-child(odd){
  background-color: greenyellow;
}

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

Answer 1

这就是我的做法

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中的数据是静态的，表仍继续呈现。

Answer 2

为什么不在数据源中包含新属性：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);
  }

和

<tr mat-row *matRowDef="let row; columns: displayedColumns;"
       [style.background-color]="row.bgColor"></tr>

参见stackblitz

为每行分配可匹配的随机颜色

2 个答案: