Question

我使用角度材质mat-table组件创建了一个简单的角度表。

使用下面的样式我可以为备用行设置颜色。但是当我在下面的样式中将行更改为列时，不会对列应用相同的颜色

 mat-row:nth-child(even){
          background-color:#f2f4f7;
                        }

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

有人可以告诉我如何为备用列添加背景颜色..？

下面显示的是我的代码

account.component.html

<mat-toolbar color="primary" style="width:100%"> WELCOME </mat-toolbar><br/>

<!-- Table starts here -->


<div class="example-container mat-elevation-z8">

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

    <!-- Account No. Column -->
    <ng-container matColumnDef="acc_id">
      <mat-header-cell *matHeaderCellDef> Account ID. </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell>
    </ng-container>

      <!-- Account Description Column -->
    <ng-container matColumnDef="acc_desc">
      <mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.acc_desc}}</mat-cell>
       </ng-container>


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


  <mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]">
  </mat-paginator>
</div>

account.component.scss

.example-container {
  display: flex;
  flex-direction: column;
  min-width: 300px;
  font-family: Verdana,Sans-Serif;
}

mat-table{
  text-align:center;
  font-size:12px;
  font-family: Verdana,Sans-Serif;
}

mat-cell{
  font-size:12px;
  font-family: Verdana,Sans-Serif;
  }

 mat-option{
  font-size:12px;
  font-family: Verdana,Sans-Serif;
  margin:-5px 0 -5px 0;
}
 mat-row:nth-child(even){
          background-color:#f2f4f7;
          }

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

 mat-column:nth-child(even){
          background-color:#f2f4f7;
                      }

 mat-column:nth-child(odd){
          background-color:none;
                        }

account.component.ts

import {Component, ViewChild, Inject, OnInit} from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import {MatPaginator, MatTableDataSource} from '@angular/material';

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


export class AccountComponent implements OnInit {

acc_desc: any;

constructor() { }


  /* Table Starts here
  ---------------------- */

 displayedColumns1 = ['acc_id', 'acc_desc'];
 dataSource1= new MatTableDataSource<Element>(ELEMENT_DATA);

ngOnInit(){
   const data = [
      {
        "acc_id": 1001,
        "acc_desc": "Administration"
      },

      {
        "acc_id": 1002,
        "acc_desc": "Laboratory"
      },

      {
        "acc_id": 1003,
        "acc_desc": "Staff"
      },

      {
        "acc_id": 1004,
        "acc_desc": "Office-1"
      },
      {
        "acc_id": 1005,
        "acc_desc": "Office-2"
      },
      {
        "acc_id": 1006,
        "acc_desc": "Office-2"
      }
   ];
     this.acc_desc = data;
     this.dataSource1.data = (data as Element[]);
  }

  @ViewChild(MatPaginator) paginator: MatPaginator;

   ngAfterViewInit() {
    this.dataSource1.paginator = this.paginator;
  } }

  export interface Element {
   acc_id: any;
   acc_desc: any; 
  }

const ELEMENT_DATA: Element[] = [];

Answer 1

尝试mat-cell而不是mat-column

mat-cell:nth-child(even){
          background-color:#f2f4f7;
                      }

 mat-cell:nth-child(odd){
          background-color:none;
                       }

如何为角度中的备用列添加背景颜色

下面显示的是我的代码

1 个答案: