angular - 如何在 igxGrid 中对单元格进行模板化？

Question

我开始使用 igx-grid 并且我使用组合框对单元格进行了模板化，如下所示：

<igx-column field="Locations" header="Available At" [editable]="true" [filterable]="false" width="220px">
     <ng-template igxCellEditor let-cell="cell" let-value>
         <igx-combo type="line"
                    [ngModel]="cell.value"
                    (ngModelChange)="onChange($event, cell)"
                    [displayKey]="'shop'"
                    [data]="locations"
                    width="220px"></igx-combo>
     </ng-template>
</igx-column>

但是，当单元格未处于编辑模式时，组合框不可见。如何使组合可见？

Answer 1

您添加了单元格编辑模板。以类似的方式，您可以添加单元格模板。在您的单元格模板中，您可以逐字添加所有内容。要添加下拉箭头，您可以igxIcon像这样添加：

<ng-template igxCell let-cell="cell">
    <span>{{ cell.value }}</span>
    <igx-icon>keyboard_arrow_down</igx-icon>
</ng-template>

您可以在此处找到有关单元格模板的更多信息。请注意，您需要设置此样式以强制将下拉箭头准确放置在组合之一的位置。