我想知道如何瞄准Angular Material Table内的偶数/奇数行,以便可以将偶数/奇数行设置为不同的背景 colored颜色 .

我设置了我的ClaimFileHistoryDataSource级:

claimClientInformation: ClaimFileHistory[];
dataSource : ClaimFileHistoryDataSource;
displayedColumns = ['TypeImg', 'Description', 'Agent'];


export class ClaimFileHistoryDataSource extends DataSource<ClaimFileHistory> {

    constructor(private _claimFileHistory: ClaimFileHistory[]) {
      super();
    }

    connect(): Observable<ClaimFileHistory[]> {
      return Observable.of(this._claimFileHistory);
    }

    disconnect() {}
}

NgInit,我调用我的服务,获取我需要的数据并填充DataSource:

this._claimFileHistoryService.getClaimFileHistoryById().subscribe(response => {
  this.claimClientInformation = response;       
  this.dataSource = new ClaimFileHistoryDataSource(this.claimClientInformation);
});

这很好,数据正在如期返回.

在HTML中,Mat-Table看起来像这样:

    <mat-table #table [dataSource]="dataSource">

      <ng-container matColumnDef="TypeImg">
        <mat-cell *matCellDef="let row"><img [src]='row.TypeImg' height="40px"></mat-cell>
      </ng-container>

      <ng-container matColumnDef="Description">
        <mat-cell *matCellDef="let row">
          <div>
            <span class="d-block">{{row.Description}}</span>
            <span class="d-block">{{row.Date}}</span>
          </div>

        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Agent">
        <mat-cell *matCellDef="let row"> {{row.Agent}} </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

同样,我想知道如何获取表格的奇数/偶数行,并将它们设置为不同的行背景色?

推荐答案

在你的应用程序中使用以下CSS.css或.scss文件设置奇偶行的不同样式:

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

Angular相关问答推荐

如何在Angular模块中的forRoot中注入配置

Angular 动画—淡出适用于DIV,不完全适用于子组件

如何使用新的@for遍历Angular 为17的对象?

访问Angular 模板中的HTML元素属性

AOS中的数据绑定--可能吗?

出错后可观察到的重用

当快速拖动光标时会丢失元素 - Angular

当信号的值发生变化时,模板不会更新

Angular *ngIf 表达式中这么多冒号的作用是什么?

在ngOninit方法中直接VS初始化属性

Angular 13 Sass 模块无法在编译中正确导入文件

将环境变量传递给Angular 库

如何在 Angular 2 中获取与 ElementRef 关联的组件的引用

由于时区,Angular 4 日期管道显示错误的日期 - 如何解决这个问题?

visibility:hidden

如何在 ngFor angular 2 内部使用 track

如何在 Angular 2 的同一个组件中使用多个 ng-content?

Angular 4中的md-select中的onselected事件

从 Angular 中的自定义表单组件访问 FormControl

使用 EventEmitter 传递参数