Динамическое количество диаграмм в charts.js + angular2 / javascript

Question

Я получаю объект json, содержащий список диаграмм для отображения в моем шаблоне.Каждая диаграмма имеет [данные] и [параметры] и [тип].Я не могу заставить работать идентификатор, даже если зациклить его с помощью ngFor.

bar.component.ts

@Component({
  selector: 'ngx-chartjs-bar',
  template: `
    <div *ngFor="let chart of bardata>
    <chart type="bar" [data]="data" [options]="options"></chart>
    </div>
  `,
})
export class ChartjsBarComponent implements OnDestroy {
  data: any;
  bardata: any;
  options: any;
  themeSubscription: any;
  newLabel : any[];
  newData : number[];
  temp : any;


  constructor(
    private theme: NbThemeService,
    protected apiService: ApiService,

  ) {

    this.bardata = this.apiService.response_object.body;
    this.newData = [];
    this.newLabel = [];
    this.temp = [];

    for(var obj in this.bardata.byFile) {
       for(var curr in this.bardata.byFile[obj]) {
          this.temp.push(this.bardata.byFile[obj][curr]);
       }
    }

    console.log(this.bardata);
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

      const colors: any = config.variables;
      const chartjs: any = config.variables.chartjs;
      this.data = {
        labels: ['Purchase Count', 'Refund Count', 'Payment Count'],
        datasets:  this.temp,

        /* [{
          data: this.newData,
          label: this.newLabel[0],
          backgroundColor: NbColorHelper.hexToRgbA(colors.primaryLight, 0.8),
        }, {
          data: [28, 48, 40, 19, 86, 27, 90],
          label: this.newLabel[1],
          backgroundColor: NbColorHelper.hexToRgbA(colors.infoLight, 0.8),
        }], */
      };

      this.options = {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          labels: {
            fontColor: chartjs.textColor,
          },
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                display: false,
                color: chartjs.axisLineColor,
              },
              ticks: {
                fontColor: chartjs.textColor,
              },
            },
          ],
          yAxes: [
            {
              gridLines: {
                display: true,
                color: chartjs.axisLineColor,
              },
              ticks: {
                fontColor: chartjs.textColor,
              },
            },
          ],
        },
      };
    });
  }

  ngOnInit() {
  }

  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }
}

В этом случае temp содержит список баров или графиков.и newData - это данные из API, содержащие наборы данных для баров / графиков.

html компонента:

<nb-card>
<nb-card-header>View All Statistics</nb-card-header>
<nb-card-body>
    <div class="row">
        <div class="col-lg-6">
            <nb-card>
                <nb-card-header>Bar</nb-card-header>
                <nb-card-body>
             issue here -->   <div *ngFor="let data of barData; index as i" [attr.data- 
                index]="i"> 
                <ngx-chartjs-bar></ngx-chartjs-bar>
                </div>     
                </nb-card-body>
            </nb-card>
        </div>
    </div>
</nb-card-body>

Выше не являетсярабочий пример, просто представление о том, что должно произойти, но не совсем уверен, как установить индекс и перебрать каждый набор данных.Должен ли ngFor входить в html или декоратор в компоненте?

РЕДАКТИРОВАТЬ: json - это просто массив диаграмм, каждый индекс ссылается на диаграмму с соответствующим набором данных.так что если barData [0] сама по себе является диаграммой.