如何为角度的备用列添加背景颜色 [英] How to add background color for alternate columns in angular

问题描述

我已经使用角材料垫表组件创建了一个简单的角表.

I have created a simple table in angular using angular material mat-table component.

使用下面的样式我可以为交替的行着色.但是当我将下面的样式中的行更改为列时，同样的情况不适用于列

Using the style below I am able color the alternate rows.But the same is not applied for columns when i change the row to column in the below style

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

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

有人可以告诉我如何在备用列中添加背景色吗?.

Can anybody tell me how can in add background color for alternate columns ..?

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[] = [];

推荐答案

尝试使用mat-cell而不是mat-column

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

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

这篇关于如何为角度的备用列添加背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！