대체 행 색상 각진 재료 표

대체 행 색상 각진 재료 표

a 내부의 짝수/홀수 행을 어떻게 대상으로 하는지 궁금합니다.Angular Material Table짝수/홀수 행을 다른 배경색으로 설정할 수 있습니다.

설정했습니다.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 또는 .scss 파일에서 다음 CSS를 사용합니다.

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

이 질문에 답할 수 있는 미래의 개발자를 위한 새로운 접근법으로 이 답변을 업데이트합니다.

재료 각도는 행 인덱스에 몇 가지 변수를 제공합니다.

<mat-row *matRowDef="
              let row;
              let even = even; 
              columns: displayedColumns;" 
         [ngClass]="{gray: even}"></mat-row>

CSS 파일에서:.gray { background-color: #f5f5f5 }

다음과 같은 다른 속성이 있습니다.index,count,first,last,even그리고.odd.

AngularDocs, 특히 "각 행의 컨텍스트 속성을 보여주는 표" 섹션에서 자세히 확인할 수 있습니다.

조건에 따라 행에 색상을 적용할 수도 있습니다.

예를 들어 셀 값이 100인 경우 행의 색상을 빨간색으로 변경합니다.

     <tr class="matheader-row" mat-row *matRowDef="let row; columns: displayColumns; 
      let i = index; let even = even;" [class.rowStyle]="row['myColumn']=='100'"
                [ngClass]="{rowcolor: even}">
        </tr>

CSS

.rowStyle{
background-color:red;
font-weight: bold;
}

위 시나리오는 열에 myColumn이 열 중 하나로 포함된 경우에 작동합니다.또한 짝수 속성을 사용하여 필요한 색상 스타일링을 적용할 수 있습니다.[ngClass]="{rowcolor: even}

만약 당신이 테마를 사용한다면 투명한 CSS는 좋아 보입니다.

.mat-row:nth-child(odd){
  background: rgba(0,0,0,0.025);
}

불행히도 위의 답변 중 어떤 것도 저에게 효과가 없었습니다(멀티템플릿 데이터 행을 사용하고 있습니다). 그러나 Gustavo Lopez 답변을 수정한 후 아래와 같이 작동하게 되었습니다.

<tr *matRowDef="
          let row;
          let index = dataIndex;
          columns: displayedColumns;" 
     [ngClass]="{alternate: index % 2 == 0 }"></tr>´

그리고 css는 이전 답과 같습니다.

.alternate { background-color: #f5f5f5 }

multiTemplateDataRows가 있을 때 홀수, 짝수 또는 인덱스 작업과 같은 속성은 없는 것처럼 보이지만 다행히 dataIndex(https://github.com/angular/components/issues/12793#issuecomment-415356860) )로 인덱스 속성을 해결했습니다.이것이 확장 가능한 행을 가진 다른 사람들에게 도움이 되기를 바랍니다.

@mohituprim과 @Gustavo Lopes의 답변은 재료 각도 데이터 테이블에 대해 저에게 효과가 있었습니다.그러나 내가 선 위를 맴돌 때마다 행은 초기 기본 색상(흰색)을 받고 마우스 아웃 이벤트에서 새로운 CSS 색상을 복원합니다.따라서 "중요" 플래그를 추가하면 수정됩니다.

.some-class-name {
    background-color: blue !important; 
}

각진 재료 포함 16

.mat-mdc-row:nth-child(even) {
  background-color: #f1f1f1; /* Set the background color for even rows */
}

.mat-mdc-row:nth-child(odd) {
  background-color: #ffffff; /* Set the background color for odd rows */
}

언급URL : https://stackoverflow.com/questions/47051235/alternate-row-colours-angular-material-table