Angular 그리드 조건부 스타일링
IgxGrid 구성요소에 사용자 정의 스타일을 제공해야 하는 경우 행 또는 셀 수준에서 수행할 수 있습니다.
그리드 조건부 행 스타일 지정
Ignite UI for Angular의 IgxGrid 구성 요소는 사용자 지정 규칙에 따라 행의 조건부 스타일을 지정하는 두 가지 방법을 제공합니다.
이 주제에서는 두 가지 모두에 대해 더 자세히 다룰 것입니다.
rowClass 사용
rowClasses
입력을 설정하고 사용자 정의 규칙을 정의하여 IgxGrid 행의 스타일을 조건부로 지정할 수 있습니다.
<igx-grid #grid [data ]="data" [height ]="'600px'" [width ]="'100%'" [rowClasses ]="rowClasses" >
...
</igx-grid >
html
rowClasses
입력은 키-값 쌍을 포함하는 객체 리터럴을 허용합니다. 여기서 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다.
public rowClasses = {
activeRow : this .activeRowCondition
};
public activeRowCondition = (row: RowType ) => this .grid?.navigation.activeNode?.row === row.index;
typescript
::ng-deep {
.activeRow {
border: 2px solid #fc81b8 ;
border-left : 3px solid #e41c77 ;
}
}
scss
또는 ViewEncapsulation.None
를 사용하여::ng-deep
사용자 정의 스타일을 현재 구성요소와 해당 자식을 통해 강제로 내려갑니다.
데모
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxGridComponent, RowType, IgxColumnComponent } from 'igniteui-angular' ;
import { DATA } from '../../data/nwindData' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-grid-row-classes-sample' ,
styleUrls : ['./grid-rowClasses.component.scss' ],
templateUrl : 'grid-rowClasses.component.html' ,
imports : [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent]
})
export class GridRowClassesComponent implements OnInit {
@ViewChild ('grid' , { static : true }) public grid: IgxGridComponent;
public data: any [];
public constructor ( ) { }
public activeRowCondition = (row: RowType ) => this .grid?.navigation.activeNode?.row === row.index;
public rowClasses = {
activeRow : this .activeRowCondition
};
public ngOnInit(): void {
this .data = DATA;
}
public handleChange ( ) {
requestAnimationFrame(() => {
this .grid.pipeTrigger++;
this .grid.notifyChanges();
});
}
public handleLeftClick (args ) {
args.event.preventDefault();
this .grid.navigation.setActiveNode({ row : args.cell.row.index, column : args.cell.column.visibleIndex });
}
}
ts コピー <div class ="grid__wrapper" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid [data ]="data" [height ]="'600px'" [width ]="'100%'" (contextMenu )="handleLeftClick($event)" (activeNodeChange )="handleChange()" [rowClasses ]="rowClasses" >
<igx-column [field ]="'ProductID'" > </igx-column >
<igx-column [field ]="'ProductName'" > </igx-column >
<igx-column [field ]="'UnitsInStock'" [dataType ]="'number'" > </igx-column >
<igx-column [field ]="'UnitPrice'" [dataType ]="'number'" > </igx-column >
<igx-column [field ]="'Discontinued'" [dataType ]="'boolean'" >
</igx-column >
<igx-column [field ]="'OrderDate'" [dataType ]="'date'" > </igx-column >
</igx-grid >
</div >
html コピー .grid__wrapper {
display : flex;
justify-content : space-between;
margin : 16px ;
flex-flow : column;
align-items : flex-start;
position : relative;
}
::ng-deep {
.activeRow {
border: 2px solid #fc81b8 ;
border-left : 3px solid #e41c77 ;
}
.toggle-section {
width : 300px ;
height : 100px ;
background-color : white;
}
}
.container {
display : flex;
igx-icon {
margin : 20px ;
}
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
rowStyle 사용
이제 열은 데이터 행의 조건부 스타일 지정을 허용하는 rowStyles
속성을 노출합니다. rowClasses
와 유사하게 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용합니다. 또한 조건 없이 일반 스타일을 적용할 수도 있습니다.
rowStyles
및 rowClasses
에 대한 콜백 서명은 다음과 같습니다.
(row: RowType) => boolean
ts
스타일을 정의해 보겠습니다.
public rowStyles = {
background : (row: RowType ) => (+row.data['Change' ] < 0 && +row.data['Change On Year(%)' ] < 0 ) ? '#FF000088' : '#00000000' ,
border : (row: RowType ) => (+row.data['Change' ] < 0 && +row.data['Change On Year(%)' ] < 0 ) ? '2px solid' : '1px solid' ,
'border-color' : (row: RowType ) => (+row.data['Change' ] < 0 && +row.data['Change On Year(%)' ] < 0 ) ? '#FF000099' : '#E9E9E9'
};
typescript
<igx-grid #grid1 [data ]="data | async" [height ]="'500px'" width ="100%"
[autoGenerate ]="false" [allowFiltering ]="true" [rowStyles ]="rowStyles" >
...
</igx-grid >
html
데모
import { Component, ViewChild } from '@angular/core' ;
import { IgxGridComponent, RowType, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent } from 'igniteui-angular' ;
import { Observable } from 'rxjs' ;
import { FinancialDataService } from '../../services/financial.service' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
import { NgIf, AsyncPipe } from '@angular/common' ;
@Component ({
providers : [FinancialDataService],
selector : 'app-grid-row-styles-sample' ,
styleUrls : ['./grid-rowStyles.component.scss' ],
templateUrl : 'grid-rowStyles.component.html' ,
imports : [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, NgIf, IgxBadgeComponent, AsyncPipe]
})
export class GridRowStylesComponent {
@ViewChild ('grid1' , { static : true }) public grid1: IgxGridComponent;
public data: Observable<any []>;
public rowStyles = {
background : (row: RowType ) => (+row.data['Change' ] < 0 && +row.data['Change On Year(%)' ] < 0 ) ? '#FF000088' : '#00000000' ,
border : (row: RowType ) => (+row.data['Change' ] < 0 && +row.data['Change On Year(%)' ] < 0 ) ? '2px solid' : '1px solid' ,
'border-color' : (row: RowType ) => (+row.data['Change' ] < 0 && +row.data['Change On Year(%)' ] < 0 ) ? '#FF000099' : '#E9E9E9'
};
constructor (private localService: FinancialDataService ) {
this .localService.getData(1000 );
this .data = this .localService.records;
}
public formatNumber (value: number ) {
return value.toFixed(2 );
}
public formatCurrency (value: number ) {
return '$' + value.toFixed(2 );
}
}
ts コピー <div class ="grid__wrapper" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid1 [data ]="data | async" [height ]="'500px'" width ="100%"
[autoGenerate ]="false" [allowFiltering ]="true" [rowStyles ]="rowStyles" >
<igx-column [field ]="'Category'" [width ]="'120px'" > </igx-column >
<igx-column [field ]="'Type'" [width ]="'150px'" [filterable ]="false" > </igx-column >
<igx-column [field ]="'Open Price'" [width ]="'120px'" dataType ="number" [formatter ]="formatCurrency" >
</igx-column >
<igx-column [field ]="'Price'" [width ]="'120px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'Change'" [width ]="'120px'" dataType ="number" [headerClasses ]="'headerAlignSyle'" >
<ng-template igxHeader >
<span > Change</span >
</ng-template >
<ng-template igxCell let-val >
<div class ="currency-badge-container" >
<igx-badge *ngIf ="val > 0" type ="success" position ="bottom-right" icon ="arrow_upward"
class ="badge-left" > </igx-badge >
<igx-badge *ngIf ="val < 0" type ="error" position ="bottom-right" icon ="arrow_downward"
class ="error badge-left" > </igx-badge >
<span class ="cellAlignSyle" [class.up ]="val > 0" [class.down ]="val < 0" > {{ formatNumber(val)
}}</span >
</div >
</ng-template >
</igx-column >
<igx-column [field ]="'Change(%)'" [width ]="'130px'" dataType ="number" [formatter ]="formatNumber" >
<ng-template igxHeader >
<span > Change(%)</span >
</ng-template >
</igx-column >
<igx-column [field ]="'Change On Year(%)'" [width ]="'150px'" dataType ="number" [formatter ]="formatNumber" >
<ng-template igxCell let-val >
<div class ="currency-badge-container" >
<igx-badge *ngIf ="val > 0" type ="success" position ="bottom-right" icon ="arrow_upward"
class ="badge-left" > </igx-badge >
<igx-badge *ngIf ="val < 0" type ="error" position ="bottom-right" icon ="arrow_downward"
class ="error badge-left" > </igx-badge >
<span class ="cellAlignSyle" [class.up ]="val > 0" [class.down ]="val < 0" > {{ formatNumber(val)
}}%</span >
</div >
</ng-template >
</igx-column >
<igx-column [field ]="'Buy'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'Sell'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'Spread'" [width ]="'130px'" dataType ="number" [formatter ]="formatNumber" > </igx-column >
<igx-column [field ]="'Volume'" [width ]="'130px'" dataType ="number" [formatter ]="formatNumber" > </igx-column >
<igx-column [field ]="'High(D)'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'Low(D)'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'High(Y)'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'Low(Y)'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'Start(Y)'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
</igx-grid >
<br />
</div >
html コピー .cellAlignSyle {
text-align : right;
float :right ;
}
.cellAlignSyle > span {
float :right ;
}
.up {
color : green;
}
.down {
color : red;
}
.headerAlignSyle {
text-align : right !important ;
}
.grid__wrapper {
margin : 0 auto;
padding : 16px ;
}
.currency-badge-container {
width : 80px ;
float : right;
}
.badge-left {
float : left;
}
scss コピー
그리드 조건부 셀 스타일 지정
개요
Ignite UI for Angular의 IgxGrid 구성 요소는 사용자 지정 규칙에 따라 셀에 조건부 스타일을 지정하는 두 가지 방법을 제공합니다.
public beatsPerMinuteClasses = {
downFont : this .downFontCondition,
upFont : this .upFontCondition
};
...
private downFontCondition = (rowData: any , columnKey : any ): boolean => {
return rowData[columnKey] <= 95 ;
}
ts
.upFont {
color : red;
}
.downFont {
color : green;
}
scss
cellClass 사용
IgxColumnComponent
cellClasses
입력을 설정하여 IgxGrid 셀의 스타일을 조건부로 지정하고 사용자 정의 규칙을 정의할 수 있습니다.
<igx-column field ="BeatsPerMinute" dataType ="number" [cellClasses ]="beatsPerMinuteClasses" > </igx-column >
html
cellClasses
입력은 키-값 쌍을 포함하는 객체 리터럴을 허용합니다. 여기서 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다.
private upFontCondition = (rowData: any , columnKey : any ): boolean => {
return rowData[columnKey] > 95 ;
}
private downFontCondition = (rowData: any , columnKey : any ): boolean => {
return rowData[columnKey] <= 95 ;
}
public beatsPerMinuteClasses = {
downFont : this .downFontCondition,
upFont : this .upFontCondition
};
typescript
::ng-deep {
.upFont {
color: green;
}
.downFont {
color : red;
}
}
scss
또는 ViewEncapsulation.None
를 사용하여::ng-deep
사용자 정의 스타일을 현재 구성요소와 해당 자식을 통해 강제로 내려갑니다.
데모
import { Component, OnInit } from '@angular/core' ;
import { athletesData } from '../../data/athletesData' ;
import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
import { DecimalPipe, PercentPipe } from '@angular/common' ;
@Component ({
selector : 'app-grid-conditional-cell-style' ,
styleUrls : ['./grid-conditional-cell-style.component.scss' ],
templateUrl : './grid-conditional-cell-style.component.html' ,
imports : [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, PercentPipe]
})
export class GridConditionalCellStyleComponent implements OnInit {
public data: any [];
public ngOnInit ( ) {
this .data = athletesData;
}
private upFontCondition = (rowData: any , columnKey : any ): boolean => rowData[columnKey] > 95 ;
private downFontCondition = (rowData: any , columnKey : any ): boolean => rowData[columnKey] <= 95 ;
private top100Condition = (rowData: any , columnKey : any ): boolean => rowData[columnKey] <= 100 ;
private belowTop100Condition = (rowData: any , columnKey : any ): boolean => rowData[columnKey] > 100 ;
private speedCondition = (rowData: any , columnKey : any ): boolean => rowData[columnKey] < 5 ;
public beatsPerMinuteClasses = {
downFont : this .downFontCondition,
upFont : this .upFontCondition
};
public rankClasses = {
belowTop100 : this .belowTop100Condition,
top100 : this .top100Condition
};
public speedClasses = {
'topSpeed topSpeedFont' : this .speedCondition
};
}
ts コピー <div class ="grid__wrapper" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid1 [data ]="data" height ="500px" width ="100%" [autoGenerate ]="false" >
<igx-column header ="Rank" field ="Id" [sortable ]="true" [editable ]="true" [sortable ]="true" [cellClasses ]="rankClasses" > </igx-column >
<igx-column field ="Name" header ="Athlete" [sortable ]="true" > </igx-column >
<igx-column field ="BeatsPerMinute" header ="Beats per minute" dataType ="number" [editable ]="true" [sortable ]="true"
[cellClasses ]="beatsPerMinuteClasses" > </igx-column >
<igx-column field ="TopSpeed" header ="Top Speed" dataType ="number" [editable ]="true" [sortable ]="true"
[cellClasses ]="speedClasses" >
<ng-template igxCell let-val >
<div class ="cell__inner" >
{{ val | number: '1.1-5' }}
</div >
</ng-template >
</igx-column >
<igx-column field ="TrackProgress" header ="Track Progress" [editable ]="true" [sortable ]="true" >
<ng-template igxCell let-val >
<div class ="cellContainer" >
<span class ="cellAlignSyle" >
{{ val / 100 | percent }}
</span >
</div >
</ng-template >
</igx-column >
<igx-column field ="CountryFlag" header ="Country" >
<ng-template igxCell let-cell ="cell" >
<div class ="cell__inner_2" >
<span >
<img [src ]="cell.value" class ="flag" />
</span >
</div >
</ng-template >
</igx-column >
</igx-grid >
</div >
html コピー :host ::ng-deep {
$primary-color-green : green;
$primary-color-red : red;
$primary-color-blue : royalblue;
$margin-right-images : 25px ;
$images-font-size : 2.5em ;
$images-font-weight : bold;
.grid__wrapper {
margin : 0 auto;
padding : 16px ;
}
.cellContainer {
width : 100% ;
float : right;
}
.cellAlignSyle {
width : 100% ;
text-align : right;
float :right ;
}
.upFont {
color : $primary-color-red ;
}
.downFont {
color : $primary-color-green ;
}
.topSpeedFont {
color : $primary-color-blue ;
}
.contentStyle {
font-size : $images-font-size ;
font-weight : $images-font-weight ;
margin-right : $margin-right-images ;
}
.arrow {
@extend .contentStyle;
content : "^" ;
}
.star {
@extend .contentStyle;
content : "*" ;
}
.top100 :before {
@extend .arrow;
color : $primary-color-green ;
margin-top : 10px ;
}
.belowTop100 :before {
@extend .arrow;
color : $primary-color-red ;
transform : rotate(180deg );
-webkit-transform : rotate(180deg );
margin-top : -10px ;
}
.topSpeed :before {
@extend .star;
font-weight : normal;
color : $primary-color-blue ;
margin-top : 10px ;
}
}
scss コピー
public styles = {
'background' : 'linear-gradient(180deg, #dd4c4c 0%, firebrick 100%)' ,
'text-shadow' : '1px 1px 2px rgba(25,25,25,.25)' ,
'animation' : '0.25s ease-in-out forwards alternate popin'
};
ts
이제 cellStyles
및 cellClasses
에 대한 콜백 서명이 다음으로 변경되었습니다.
(rowData: any , columnKey : string , cellValue : any , rowIndex : number ) => boolean
ts
cellStyle 사용
이제 열은 열 셀의 조건부 스타일 지정을 허용하는 cellStyles
속성을 노출합니다. cellClasses
와 유사하게 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용합니다. 또한 아무런 조건 없이 일반 스타일링을 쉽게 적용할 수 있습니다.
위의 샘플 에서는 다음을 만들었습니다.
열 인덱스를 기반으로 적용되는 두 가지 스타일입니다.
또한 짝수/홀수 행을 기준으로 text color
변경합니다.
두 cellStyles
에 대한 콜백 서명은 다음과 같습니다.
(rowData: any , columnKey : string , cellValue : any , rowIndex : number ) => boolean
ts
스타일을 정의해 보겠습니다.
public oddColStyles = {
background : 'linear-gradient(to right, #b993d6, #8ca6db)' ,
color : (rowData, coljey, cellValue, rowIndex ) => rowIndex % 2 === 0 ? 'white' : 'gray' ,
animation : '0.75s popin'
};
public evenColStyles = {
background : 'linear-gradient(to right, #8ca6db, #b993d6)' ,
color : (rowData, coljey, cellValue, rowIndex ) => rowIndex % 2 === 0 ? 'gray' : 'white' ,
animation : '0.75s popin'
};
typescript
ngOnInit
에서는 IgxGrid 열을 동적으로 생성하는 데 사용되는 사전 정의된 columns
컬렉션의 각 열에 대한 cellStyles
구성을 추가합니다.
public ngOnInit ( ) {
this .data = athletesData;
this .columns = [
{ field : 'Id' },
{ field : 'Position' },
{ field : 'Name' },
{ field : 'AthleteNumber' },
{ field : 'CountryName' }
];
this .applyCSS();
}
ts
public applyCSS ( ) {
this .columns.forEach((column, index ) => {
column.cellStyles = (index % 2 === 0 ? this .evenColStyles : this .oddColStyles);
});
}
public updateCSS (css: string ) {
this .oddColStyles = {...this.oddColStyles, ...JSON.parse(css)};
this .evenColStyles = {...this.evenColStyles, ...JSON.parse(css)};
this .applyCSS();
}
ts
// component.html
<igx-grid
#grid1 [data ]="data"
primaryKey ="ID"
width ="80%"
height ="300px" >
<igx-column *ngFor ="let c of columns"
[field ]="c.field"
[header ]="c.field"
[cellStyles ]="c.cellStyles" >
</igx-column >
</igx-grid >
html
popin
애니메이션 정의
@keyframes popin {
0% {
opacity : 0.1 ;
transform : scale(.75 , .75 );
filter : blur(3px ) invert(1 );
}
50% {
opacity : .5 ;
filter : blur(1px );
}
100% {
transform : scale(1 , 1 );
opacity : 1 ;
filter : none;
}
}
scss
데모
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxGridComponent, IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective, IgxColumnComponent } from 'igniteui-angular' ;
import { athletesData } from '../../data/athletesData' ;
import { NgFor, JsonPipe } from '@angular/common' ;
@Component ({
selector : 'app-grid-conditional-cell-style-2' ,
styleUrls : ['./grid-conditional-cell-style-2.component.scss' ],
templateUrl : './grid-conditional-cell-style-2.component.html' ,
imports : [IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective, IgxGridComponent, NgFor, IgxColumnComponent, JsonPipe]
})
export class GridConditionalCellStyle2Component implements OnInit {
@ViewChild ('grid1' , { read : IgxGridComponent, static : true })
public grid1: IgxGridComponent;
public data: any [];
public columns: any [];
public oddColStyles = {
background : 'linear-gradient(to right, #b993d6, #8ca6db)' ,
color : (rowData, coljey, cellValue, rowIndex ) => rowIndex % 2 === 0 ? 'white' : 'gray' ,
animation : '0.75s popin'
};
public evenColStyles = {
background : 'linear-gradient(to right, #8ca6db, #b993d6)' ,
color : (rowData, coljey, cellValue, rowIndex ) => rowIndex % 2 === 0 ? 'gray' : 'white' ,
animation : '0.75s popin'
};
public ngOnInit ( ) {
this .data = athletesData;
this .columns = [
{ field : 'Id' },
{ field : 'Position' },
{ field : 'Name' },
{ field : 'AthleteNumber' },
{ field : 'CountryName' }
];
this .applyCSS();
}
public applyCSS ( ) {
this .columns.forEach((column, index ) => {
column.cellStyles = (index % 2 === 0 ? this .evenColStyles : this .oddColStyles);
});
}
public updateCSS (css: string ) {
this .oddColStyles = {...this.oddColStyles, ...JSON.parse(css)};
this .evenColStyles = {...this.evenColStyles, ...JSON.parse(css)};
this .applyCSS();
}
}
ts コピー <div class ="grid__wrapper" >
<div >
<igx-input-group type ="border" >
<textarea style ="font-family: monospace;" #userCSS igxInput cols ="15" rows ="5" > {{ oddColStyles | json }}</textarea >
<igx-hint > Note: You cannot use the callback functionality here</igx-hint >
</igx-input-group >
<button igxButton ="outlined" (click )="updateCSS(userCSS.value)" > Apply new styles</button >
</div >
<igx-grid
#grid1 [data ]="data"
primaryKey ="ID"
height ="300px" >
<igx-column *ngFor ="let c of columns"
[field ]="c.field"
[header ]="c.field"
[cellStyles ]="c.cellStyles" >
</igx-column >
</igx-grid >
</div >
html コピー .grid__wrapper {
margin : 0 auto;
padding : 16px ;
transition-timing-function : cubic-bezier(0.455 , 0.03 , 0.515 , 0.955 );
igx-grid {
margin-top : 25px ;
}
}
@keyframes popin {
0% {
opacity : 0.1 ;
transform : scale(.75 , .75 );
filter : blur(3px ) invert(1 );
}
50% {
opacity : .5 ;
filter : blur(1px );
}
100% {
transform : scale(1 , 1 );
opacity : 1 ;
filter : none;
}
}
scss コピー
알려진 문제 및 제한 사항
다른 열에서 동일한 조건에 바인딩되는 셀이 있고 한 셀이 업데이트되는 경우 조건이 충족되면 다른 셀은 새 값을 기반으로 업데이트되지 않습니다. 나머지 셀에 변경 사항을 적용하려면 파이프 검사를 수행해야 합니다. 아래 예는 이를 수행하는 방법을 보여줍니다. spread operator(...)
에 onCellEdit
이벤트. 이렇게하면 원래 객체가 새 인스턴스로 복사되고 순수 파이프가 발사됩니다.
public backgroundClasses = {
myBackground : (rowData: any , columnKey: string ) => {
return rowData.Col2 < 10 ;
}
};
...
editDone (evt ) {
this .backgroundClasses = {...this.backgroundClasses};
}
ts
<igx-grid #grid1 [data ]="data" height ="500px" width ="100%" (onCellEdit )="editDone($event)" >
<igx-column field ="Col1" dataType ="number" [cellClasses ]="backgroundClasses" > </igx-column >
<igx-column field ="Col2" dataType ="number" [editable ]="true" [cellClasses ]="backgroundClasses" > </igx-column >
<igx-column field ="Col3" header ="Col3" dataType ="string" [cellClasses ]="backgroundClasses" > </igx-column >
</igx-grid >
html
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.