为什么Datatable扩展子行中的ng-charts图表无法正常显示？

问题根因 #

你当前通过字符串拼接返回HTML的方式无法让ng-charts正常工作：baseChart是Angular的自定义指令，[datasets]这类方括号语法是Angular的输入绑定语法，二者都需要经过Angular编译器在Angular上下文内解析才能生效，直接把拼接好的HTML字符串传给jQuery Datatable的child方法插入DOM，Angular不会识别处理这些语法，最终只会渲染一个空的canvas标签，没有任何图表内容。

1. 创建独立的图表子组件 #

先封装一个单独的行内图表组件，用于承载ng-charts的渲染逻辑：

// row-chart.component.ts
import { Component, Input } from '@angular/core';
import { ChartConfiguration, ChartType } from 'chart.js';

@Component({
  selector: 'app-row-chart',
  template: `
  <div class="row">
    <div class="card-body">
      <canvas baseChart
        [datasets]="lineChartData"
        [labels]="lineChartLabels"
        [options]="lineChartOptions"
        [colors]="lineChartColors"
        [legend]="lineChartLegend"
        [chartType]="lineChartType"
        [plugins]="lineChartPlugins">
      </canvas>
    </div>
  </div>
  `
})
export class RowChartComponent {
  @Input() lineChartData: ChartConfiguration['data']['datasets'];
  @Input() lineChartLabels: ChartConfiguration['data']['labels'];
  @Input() lineChartOptions: ChartConfiguration['options'];
  @Input() lineChartColors: any[];
  @Input() lineChartLegend: boolean;
  @Input() lineChartType: ChartType;
  @Input() lineChartPlugins: any[];
}

将该组件添加到对应模块的declarations数组中，如果你的Angular版本低于9（非Ivy编译模式），还需要同时加入entryComponents数组。

2. 改造子行展开逻辑，用动态组件渲染 #

在你当前使用Datatable的组件中，通过动态组件API渲染图表组件，再把生成的真实DOM塞到Datatable子行里：

// 你的当前业务组件.ts
import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { RowChartComponent } from './row-chart.component';

constructor(
  private componentFactoryResolver: ComponentFactoryResolver,
  private viewContainerRef: ViewContainerRef
) {}

addChildTable(rowInstance, index: string) {
  const tr = $('#' + index);
  const row = this.table.row(rowInstance);
  const data = this.table.row(rowInstance).data();
  
  if (row.child.isShown()) {
    row.child.hide();
    tr.removeClass('shown');
  } else {
    // 解析组件工厂，创建图表组件实例
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(RowChartComponent);
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
    
    // 给图表组件传入配置参数
    componentRef.instance.lineChartData = this.lineChartData;
    componentRef.instance.lineChartLabels = this.lineChartLabels;
    componentRef.instance.lineChartOptions = this.lineChartOptions;
    componentRef.instance.lineChartColors = this.lineChartColors;
    componentRef.instance.lineChartLegend = this.lineChartLegend;
    componentRef.instance.lineChartType = this.lineChartType;
    componentRef.instance.lineChartPlugins = this.lineChartPlugins;
    
    // 手动触发变更检测，确保组件渲染完成
    componentRef.changeDetectorRef.detectChanges();
    
    // 将渲染好的组件DOM插入Datatable子行
    row.child(componentRef.location.nativeElement).show();
    tr.addClass('shown');
    
    // 子行关闭时销毁组件，避免内存泄漏
    row.on('child-remove', () => {
      componentRef.destroy();
    })
  }
}

如果你的项目使用Angular14及以上版本，可以直接调用viewContainerRef.createComponent(RowChartComponent)创建组件实例，不需要提前解析ComponentFactory。

3. 移除原有拼接HTML的getRowDetails方法 #

该方法生成的纯字符串HTML无法适配Angular的指令绑定逻辑，无需保留。

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