Angular 15版本中ngx-datatable不支持ng-template的问题求助

在Angular 15版本中，直接在<ngx-datatable-column>内部使用带有ngx-datatable-cell-template指令的<ng-template>会出现不支持、无法正常渲染的问题，原代码示例如下：

<ngx-datatable-column [width]="50" [resizeable]="false" [sortable]="false" [draggable]="false"
    [canAutoResize]="false">
    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
        <a class="text-decoration" href="javascript:void(0)" [class.datatable-icon-right]="!expanded"
            [class.datatable-icon-down]="expanded" title="Expand/Collapse Row" (click)="toggleExpandRow(row)">
        </a>
    </ng-template>
</ngx-datatable-column>

解决步骤： #

• 调整模板结构，将<ng-template>定义为独立的模板引用变量，移除原有的ngx-datatable-cell-template指令
• 在<ngx-datatable-column>上通过[cellTemplate]属性绑定该模板引用变量

修改后的代码示例：

<ngx-datatable-column 
  [width]="50" 
  [resizeable]="false" 
  [sortable]="false" 
  [draggable]="false"
  [canAutoResize]="false"
  [cellTemplate]="expandCellTemplate">
</ngx-datatable-column>

<ng-template #expandCellTemplate let-row="row" let-expanded="expanded">
  <a class="text-decoration" href="javascript:void(0)" 
     [class.datatable-icon-right]="!expanded"
     [class.datatable-icon-down]="expanded" 
     title="Expand/Collapse Row" 
     (click)="toggleExpandRow(row)">
  </a>
</ng-template>

补充说明： #

Angular 15对模板指令的作用域和绑定规则做了严格调整，旧的指令式模板声明方式不再适配当前版本的Angular。改用模板引用变量绑定的方式，能让ngx-datatable正确识别并渲染单元格模板。同时建议检查@swimlane/ngx-datatable的版本，升级到支持Angular 15的最新稳定版，避免版本兼容问题。

内容的提问来源于stack exchange，提问作者Ashwini Natarajan