Infragistics｜Ultimate UI Angular｜在 IgxGrid 單元格中顯示複選框

此篇文章為基於 Angular 9.1.6 版本的 Ignite UI 的資訊。

如果您想在 IgxGrid boolean 值欄位單元格中顯示/使用複選框，請使用單元格模板放置複選框, 並使用當選中狀態, 更改為綁定值時觸發的事件。

例如，如果您對複選框使用 input(type=”checkbox”) 並使用 Angular 的 ngModelChange 事件：

 <!-- app.component.html --> 
 <igx-grid #grid1 [data]="data" height="400px" width="100%" [autoGenerate]="false"> 
   <igx-column field="Finished" header="完了済？"> 
     <ng-template igxCell let-cell="cell"> 
       <input type="checkbox" [ngModel]="cell.value" (ngModelChange)="cell.update($event)" /> 
     </ng-template> 
   </igx-column> 
 </igx-grid> 

第 5 行中使用的單元格是與此單元格關聯的 IgxCellComponent 對象。

範例

參考文件

• 「Grid」→「列的構成」
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid.html#%E5%88%97%E3%81%AE%E6%A7%8B%E6%88%90
  • 在“列配置”的“單元格模板”中有一個用於排列複選框的代碼片段。
• IgxCellComponent的更新方法
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcellcomponent.html#update