Question

我有一套七种颜色，可以说borderColor=['primary', 'accent', 'emphasis', 'warn', 'error', 'info', 'success']。我想给每行不同的左边框颜色。如果行数大于7，则从第8行开始，borderColor数组序列中的每一行都会重复颜色。

HTML


 <table  mat-table="" [dataSource]="dataSource">
        <!-- Position Column -->
        <ng-container matColumnDef="position">
          <th  mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
          <td  mat-cell *matCellDef="let element"> {{element.position}} </td>
        </ng-container>

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

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

JS


import { Component, ViewChild, AfterViewInit, AfterViewChecked } from '@angular/core';
import {ELEMENT_DATA, ELEMENTTEST_DATA } from './../data/element-data';
import {SelectionModel} from '@angular/cdk/collections';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'table-styling',
  templateUrl: './table-styling.component.html',
  styleUrls: ['./table-styling.component.scss']
})

export class TableStylingComponent  {
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  borderColor = ['primary', 'accent', 'emphasis', 'warn', 'error', 'info', 'success'];
}

Answer 1

在这里：

使用ngClass从borderColor数组中添加Class，以确保您在borderColor中添加的所有类都是有效的。

代码：

<table  mat-table="" [dataSource]="dataSource">
    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th  mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
      <td  mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

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

    <tr mat-header-row *matHeaderRowDef="basicColumns"></tr>
    <tr  mat-row *matRowDef="let row; columns: basicColumns; let colorIndex = 
    index; " [ngClass]="borderColor[colorIndex]">
    </tr>

styles.css

.primary {
    border-left: #ccc; // your color hex code

}
.warn{
    border-left: #000; // your color hex code
}

以此类推...

Answer 2

我认为您正在搜索结合modulo的{{1}}运算符。

ngStyle

示例：

<tr  mat-row *matRowDef="let row; columns: basicColumns; let colorIndex = index;"
  [ngStyle]="{ 'border-left-color': borderColor[colorIndex % borderColor.length] }">
</tr>

<table>
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr *ngFor="let row of rowData; let index=index"
      [ngStyle]="{ 'background-color': colors[index % colors.length] }">
    <td>{{ row.a }}</td>
    <td>{{ row.b }}</td>
  </tr>
</table>

请参阅stackblitz：https://stackblitz.com/edit/angular-ivy-6vlrzh?file=src/app/app.component.ts

对颜色集中的每个mat数据表行应用不同的边框颜色

2 个答案: