如何在angular 7模板上迭代component（d3js的component）的选择器以绘制d3js多折线图

Question

我正在尝试绘制d3js版本5的多个折线图。 我已经为多折线图编写了一个通用组件，而从其他组件中，我们通过* ngFor将数据作为对象数组传递来绘制图表。 但是不知何故，它没有显示图表，我们也没有确切的原因。

我尝试传递时间图表正在呈现的单个对象数据，而不是传递对象数组（绘制图表的数据）。当我尝试使用对象数组时，它没有绘制图表。我们已经检查了两种情况下的数据格式及其相同。请在下面找到组件和模板代码。 我们无法确定绘制d3 js图表或其他任何数据是数据问题。

     component:

    this.myApi.drawMultiLineChart(reqObj).subscribe(response => {
    this.obj[this.obj.length] = {
     transactionid: this.globals.transactionId,
     widgetId: selectedChart.widgetId,
     chartType: selectedChart.chartType,
     chartTitle: selectedChart.chartTitle,
     xAxis: selectedChart.xAxis,
     yAxis: selectedChart.yAxis,
     minId: selectedChart.minId,
     maxId: selectedChart.maxId,
     targetId: selectedChart.targetId,
     chartId: selectedChart.chartId,
     chartData: response
    }

    Template:

    <div class="row mb-4">
    <ng-container *ngFor="let chart of chartsData">

    <div class="col-md-6 mb-4">
     <div class="widgetHeader">
       <span>{{chart.chartTitle}}</span>
     </div>
     <div class="widgetContainer">
      <app-multi-line-chart [data]='chart.chartData' 
      [chartId]='chart.chartId' [title]='chart.chartTitle' 
      [minId]='chart.minId' [maxId]='chart.maxId' 
      [targetId]='chart.targetId'></app-multi-line-chart>
     </div>

     </div>

     </ng-container>
     </div>

预期结果-容器应同时显示两个图表。

但是它只显示了两个空容器。

谢谢您的帮助。