让我们根据 IgcDataGrid 中的单元格值更改单元格颜色、字体和文本大小。完成的图像将如下所示。

方法

当数据绑定到列时，列的 dataBound 事件会触发。使用那个dataBound事件判断库存数量是否小于20，小于20则设置cellInfo的背景和字体。

<!-- html 端 (index.html) -->

< igc-数据网格

 自动生成列= "false" >

 <!--（略）-->

 < igc-numeric-column id = "stockedAmountColumn" field = "StockedAmount" header-text = "stock count" > </ igc-numeric-column >

 <!--（略）-->

</igc-数据网格> _ _

// Typescript 端 (src\DataGridOverview.ts)

// 获取库存数量列的元素。

让stockedAmountColumn = document .getElementById ( " stockedAmountColumn" )作为IgcNumericColumnComponent；

// 为 dataBound 事件定义一个事件处理器

stockedAmountColumn.dataBound = function （发件人：任何，args：IgcDataBindingEventArgs ）{

   // 如果库存数量小于 20

   如果（args.cellInfo.rowItem.StockedAmount < 20 ）{ _ _ _ _ _

       // 使单元格颜色为粉红色

       args.cellInfo.background = "pink";

       // フォントを20px、Verdanaにする。記述シンタックスはCSSのfont設定と同じです。

       args.cellInfo.font = "20px Verdana";

   }

}