通過將模板應用到 IgxGrid 的顯示單元格,您可以將多個數據綁定到一個單元格。
要將模板應用到可見單元格,請使用IgxCell 指令。在 ng-template 中,您可以通過 ngTemplateOutletContext 獲取對IgxGridCell 的引用,因此將其存儲在變量 cell(let-cell) 中。從變量 cell 中,使用 cell.row.rowData 訪問行數據。
<igx-grid #grid1 [data]=“localData” [primaryKey]=“‘id'” [autoGenerate]=“false” width=“500px” height=“350px”>
<igx-column field=“id” header=“id”></igx-column>
<igx-column field=“name” header=“名前”></igx-column>
<igx-column field=“prefecture” header=“場所”>
<ng-template igxCell let-cell=“cell”>
<div>
<div>{{cell.row.rowData.prefecture}}</div>
<div>{{cell.row.rowData.city}}</div>
</div>
</ng-template>
</igx-column>
</igx-grid>
執行結果