각4 재질 테이블 하이라이트 행

각4 재질 테이블 하이라이트 행

나는 그 전체 열을 강조할 수 있는 좋은 방법을 찾고 있습니다.md-table.
지시를 해야 할까요?

<div class="example-container mat-elevation-z8">
  <md-table #table [dataSource]="dataSource">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- ID Column -->
    <ng-container cdkColumnDef="userId">
      <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container cdkColumnDef="progress">
      <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container cdkColumnDef="userName">
      <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
    </ng-container>

    <!-- Color Column -->
    <ng-container cdkColumnDef="color">
      <md-header-cell *cdkHeaderCellDef>Color</md-header-cell>
      <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
    </ng-container>

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
  </md-table>
</div>

표: https://material.angular.io/components/table/overview

최신 자료 버전 업데이트(md --> mat):

html:

<!-- Add the highlight class in row definiton of md-table -->
<!-- Add click event to pass the selected row index -->

<mat-row *cdkRowDef="let row; columns: displayedColumns;" 
         [ngClass]="{'highlight': selectedRowIndex == row.id}"
         (click)="highlight(row)">
</mat-row>

원래 답변:

사용하시면 됩니다.ngClass그리고 깃발같은거.selectedRowIndex. 클릭할 때마다 행 인덱스는 다음과 같습니다.selectedRowIndex, 수업이 적용됩니다.

플렁커 데모

html:

<!-- Add the highlight class in row definiton of md-table -->
<!-- Add click event to pass the selected row index -->

<md-row *cdkRowDef="let row; columns: displayedColumns;" 
         [ngClass]="{'highlight': selectedRowIndex == row.id}"
         (click)="highlight(row)">
</md-row>

CSS:

.highlight{
  background: #42A948; /* green */
}

ts:

selectedRowIndex = -1;

highlight(row){
    this.selectedRowIndex = row.id;
}

표 개요 예제 페이지에서 설명합니다.SelectionModel선택 항목을 처리하는 경우 - 또한 다중 selection도 처리합니다.

selection는 구성 요소에 정의된 SelectionModel입니다.이에 대한 실제 문서를 찾을 수 없었지만 구현은 매우 간단합니다.

selection = new SelectionModel<CustomerSearchResult>(false, null);

첫번째 파라미터는allowMultiSelect, 여러 항목을 한 번에 선택할 수 있도록 true로 설정합니다.거짓인 경우 새 값을 설정할 때 선택 모형이 기존 값의 선택을 취소합니다.

그런 다음 클릭 이벤트를 다음에 추가합니다.select()행을 선택할 때 사용할 CSS 클래스를 생성합니다.

   <mat-table>
        ...

        <mat-row *matRowDef="let row; columns: displayedColumns;"
                 [ngClass]="{ 'selected': selection.isSelected(row)}"
                 (click)="selection.select(row)"></mat-row>

    </mat-table>

제가 추가한 CSS 클래스는 아래와 같습니다(샘플은 아직 스타일링에 대해 언급하지 않았습니다). 그리고 나서 당신은 당신의 CSS에 추가하면 됩니다.

.mat-row {
   min-height: 65px;

   &.selected {
       background: #dddddd;
   }
}

배경색이 너무 어두우면 직접 스타일을 추가하여 텍스트 색을 반전시켜야 합니다.

선택 항목을 처리하려면onChange의 경우selection.

    // selection changed
    this.selection.onChange.subscribe((a) =>
    {
        if (a.added[0])   // will be undefined if no selection
        {
            alert('You selected ' + a.added[0].fullName);
        }
    });

또는 선택한 항목이 다음에 있습니다.this.selection.selected.

저는 희망합니다.mat-table이와 같은 일반적인 경우에 대해 개선되고 개발자에게 모든 것을 맡기지 않습니다.키보드 이벤트 등은 선택 모델에 대해 자동으로 처리하면 좋을 것 같습니다.

테이블 데이터에 id 열과 같은 고유 식별자가 없었지만 이를 통해 효과를 얻었습니다(자료 6).

HTML

 <tr mat-row *matRowDef="let row; columns: displayedColumns" 
     (click)="selectedRow = row" [ngClass]="{ 'selected': row === selectedRow }"> 
 </tr>

사용자가 다른 클릭으로 선택을 취소할 수 있도록 하려면 HTML을 선택합니다.

 <tr mat-row *matRowDef="let row; columns: displayedColumns" 
     (click)="selectedRow = selectedRow === row ? null : row" [ngClass]="{ 'selected': row === selectedRow }"> 
 </tr>

TS에 변수 추가

selectedRow;

(S)CSS

.selected {
  background-color: red;
}

행을 선택할 때 단순히 스타일링하는 것 이상의 일을 하고 싶다면 교체합니다.(click)="selectedRow = row"와 함께(click)="selectRow(row)"이 기능을 ts에 추가합니다.

selectRow(row) {
    this.selectedRow = row;
    // more stuff to do...
}

그래서 저도 이 문제에 부딪혔습니다.'md-'가 아니라 새로운 'mat-'를 사용하고 있지만, 거의 비슷할 것으로 생각됩니다.

<mat-row
    *matRowDef="let row; columns: myColumns; let entry"
    [ngClass]="{ 'my-class': entry.someVal }">
</mat-row>

그런 건 어디서도 못 찾았고, 그냥 시도해봤는데 마침 잘 됐으니 그게 맞았으면 좋겠어요.중요한 것은 다른 매트RowDef 항목의 끝에 '입력 허용' 태그를 다는 것이었습니다.파티에 너무 늦어서 죄송합니다.이것이 누군가에게 도움이 되기를 바랍니다.

재료의 경우 "^7.0.3",

따옴표 하나 없이 html에서 cs 이름을 사용하여 행을 강조 표시합니다.

 .mat-row.highlighted {
  background: lightblue;
  }


<tr mat-row *matRowDef="let row; columns: displayedColumn;" 
[ngClass]="{highlighted: selectedRowIndex == row.id}"  (click)="highlight(row)" > 
</tr>


highlight(row){
this.selectedRowIndex = row.id;
}

Zuzie의 답변을 바탕으로 저는 다음과 같이 했습니다.

HTML:

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" 
    (click)="onRowClicked(row)" [ngClass]="{ 'selected': row === selectedRow }">
</mat-row>

TS에 변수 추가:

selectedRow : boolean;

TS에 다음 기능을 추가합니다.

onRowClicked(row) {

   if(!this.selectedRow)
   {
     this.selectedRow = row;
   }   
   else
   {
     this.selectedRow = row;
   }

}

(S)CSS

.selected {
  background-color: red;
}

이렇게 하면 행이 이전에 선택되지 않은 경우 여러 행을 선택할 수 있고 다시 클릭하면 선택 취소됩니다.

HTML

<mat-row *matRowDef="let row; columns: displayedColumns;"
  (click)="findOut(row)"[style.background]="highlightedRows.indexOf(row) != -1 ? 'lightgrey' : ''"></mat-row>

스크립트 유형

배열 만들기

highlightedRows = [];

findOut 함수 정의

findOut(row){
  if(this.highlightedRows.indexOf(row) === -1){
    this.highlightedRows.push(row);
    }
    else{
    
      this.highlightedRows[this.highlightedRows.indexOf(row)] = -1;
    }
    
  }

저는 모든 프로젝트에 대해 동일한 요청을 받고 이 지침을 만들었습니다.

import { Directive, ElementRef, HostListener, Input } from "@angular/core";
 
@Directive({
    selector: '[toggleActiveStyle]'
})
export class ToggleActiveStyleDirective {
    prevElement: HTMLElement;
 
    @Input() addActiveCSSClass: boolean;
 
    constructor(private el: ElementRef) {}
 
    @HostListener('click') onClick () {
        setTimeout(() => {
            for(let i = 0; i < this.el.nativeElement.parentElement.children.length; i++) {
                this.el.nativeElement.parentElement.children[i].style.background = '';
            }
            if(this.addActiveCSSClass) {
                this.el.nativeElement.style.background = 'white';
            }
            else {
                this.el.nativeElement.style.background = '#cccccc';
            }
        });
    }
}

HTML로 다음을 추가합니다.

설정할 수 있는 성분: addBg = true/false;

언급URL : https://stackoverflow.com/questions/45417248/angular-4-material-table-highlight-a-row