Angular 基于模板值的剑道UI网格样式单元格

我想根据其值设置特定单元格的cellStyle

如果状态为已启动，我希望背景为绿色

如果状态为停止，我希望背景为红色

考虑下表：

   <kendo-grid [data]="gridData" style="height: 200px">
     <kendo-grid-column field="machineName" title="Machine">
     </kendo-grid-column>
     <kendo-grid-column field="article" title="Article">
     <ng-template kendoGridCellTemplate let-dataItem>
      {{dataItem.article}}
     </ng-template>
     </kendo-grid-column>
     <kendo-grid-column field="status" title="Status">
     </kendo-grid-column>
   </kendo-grid>

{{dataItem.article}

我尝试过使用条件[ngClass]和[ngStyle]，但似乎都不起作用，很自然，我认为此时我无法访问templates值，只能在

标记中使用。访问当前网格列值似乎比我想象的要困难。但是，行似乎是可能的：

如果我要在ng模板上应用样式，这是完全可能的，但这不会为整个gridCell设置样式

这里有一个stackblitz演示我想要什么：

如果您想亲自使用源代码，请点击这里：

TL；DR-如何根据状态值设置整个单元格的样式<代码>开始=绿色和

停止=红色

API:

---

参考资料：

您可以根据

行类设置单元格样式。（）

通过有条件地（基于数据项）向整行添加类并基于该类设置单元格样式

组件。ts

@Component({...})
export class MyComponent {
    ...

    public rowClassCallback = (context: RowClassArgs) => {
        switch (context.dataItem.status) {
            case 'Started':
                return { started : true };
             case 'Stopped':
                return { stopped : true };
             default:
                return { };
        }
    }
}

.started .statusColumn { background-color: green; }
.stopped .statusColumn { background-color: red; }

component.html

<kendo-grid [data]="gridData" [rowClass]="rowClassCallback">
    <kendo-grid-column field="status" title="Status" class="statusColumn">
    </kendo-grid-column>
    ...
</kendo-grid>

我还准备了一个。
您可以根据
行类
设置单元格样式。（）

通过有条件地（基于数据项）向整行添加类并基于该类设置单元格样式

组件。ts

@Component({...})
export class MyComponent {
    ...

    public rowClassCallback = (context: RowClassArgs) => {
        switch (context.dataItem.status) {
            case 'Started':
                return { started : true };
             case 'Stopped':
                return { stopped : true };
             default:
                return { };
        }
    }
}

.started .statusColumn { background-color: green; }
.stopped .statusColumn { background-color: red; }

component.html

<kendo-grid [data]="gridData" [rowClass]="rowClassCallback">
    <kendo-grid-column field="status" title="Status" class="statusColumn">
    </kendo-grid-column>
    ...
</kendo-grid>

我还准备了一份。
我会批准你的答案作为解决方案。谢谢你抽出时间。我所做的工作示例：Hello Philipp，这将用于数据绑定，对吗？如果我有一个按钮，点击时我想看到突出显示的颜色怎么办？我会批准你的答案作为解决方案。谢谢你抽出时间。我所做的工作示例：Hello Philipp，这将用于数据绑定，对吗？如果我有一个按钮，点击时我想看到突出显示的颜色，该怎么办？