如何根據劍道網格中的特定列條件更改行的顏色以獲得角度

Question

我想將紅色應用於已完成小時列值大於 24 的行。我該怎么做。 請幫助我是角度的新手。

<kendo-grid [kendoGridBinding]="gridData">
    <kendo-grid-column field="RequestNumber" title="Request No."  
width="110" >
    </kendo-grid-column>
<kendo-grid-column field="RequestNumber" title="Request No."  width="110" >
    </kendo-grid-column>
<kendo-grid-column field="Name" title="Name."  width="110" >
    </kendo-grid-column>
<kendo-grid-column field="CompletedIn" title="CompletedIn"  width="110" >
    </kendo-grid-column>
 </kendo-grid>

Answer 1

首先：您必須將[rowClass]添加到您的網格中

<kend-grid [rowClass]="rowCallback">
</kendo-grid>

然后你需要在組件內部添加函數並返回所需的類

public rowCallback(context: RowClassArgs) {
  if (context.dataItem.someProperty) {   // change this condition as you need
    return {
      passive: true
    };
  }
}  

最后，您需要有一個帶有您返回名稱的 CSS 類，（在這種情況下是passive但當然您可以根據需要更改它）

@Component({
  selector: "your-component",
  templateUrl: "./your.component.html",
  encapsulation: ViewEncapsulation.None,
  styles: [
    `
     .k-grid tr.passive {
        background-color: lightgray;
      }

    `
  ]
})

使用encapsulation: ViewEncapsulation.None非常重要encapsulation: ViewEncapsulation.None並使用前綴.k-grid tr命名類，否則您將無法獲得所需的結果

Answer 2

使用rowClass回調為數據項滿足某些自定義條件的所有行提供自定義類，然后通過 CSS 設置它們的樣式，例如：

文檔 + 演示

Answer 3

如果滿足上述條件，這將用紅色背景顏色標記行

 <tr *ngFor="let myObject of myArray;" [ngStyle]="{'background-color':myObj.completedIn>24 ? 'red' : '' }"> <!-- your other code --> </tr>