Из файла JSON: как создать один общий компонент angular ng2-charts (гистограмма), который можно вызывать из разных компонентов с разными параметрами

Я пытаюсь создать общий компонент ng2-charts (Bar Stacked), где я могу передавать данные из другого компонента, и он будет обновляться. На самом деле я хочу отображать несколько одинаковых столбчатых диаграмм с разными значениями на одной странице при загрузке страницы.

Я создал один общий компонент с диаграммами ng-2, а также одну службу. Теперь я вызываю общий компонент из еще одного другого компонента через общую службу с другим параметром, а источник данных поступает из файла json, который я получаю через API.

Теперь, при извлечении, когда я выполняю console.log (), и в нем отображаются мои данные.

1-я ситуация:

В моем общем HTML-канале компонентов, если я напишу [datasets] = "barChartData? BarChartData: []", тогда данные отображаются на диаграмме, но в консоли, есть такие ошибки, как ERROR TypeError: «this.datasets [0] is undefined», и для этой ошибки все зависает, другие вещи не работают.

2-я ситуация

В моем общем HTML-канале компонентов, если я напишу [datasets] = "barChartData", тогда данные не отображаются "

мой общий компонент (bar-chart.component.ts),

import { Component, OnInit, Input } from "@angular/core";
import { ChartOptions, ChartType, ChartDataSets } from "chart.js";
import * as pluginDataLabels from "chartjs-plugin-datalabels";
import { Label } from "ng2-charts";

@Component({
  selector: "app-common-barchart",
  templateUrl: "./common-barchart.component.html",
  styleUrls: ["./common-barchart.component.css"]
})
export class CommonBarchartComponent implements OnInit {
  constructor() {}

  public barChartOptions: ChartOptions = {
    responsive: true,
    // We use these empty structures as placeholders for dynamic theming.
    scales: {
      xAxes: [
        {
          stacked: true
        }
      ],
      yAxes: [{}]
    },
    plugins: {
      datalabels: {
        anchor: "center",
        align: "center"
      }
    }
  };

  @Input() barChartLabels: Label[];
  @Input() barChartData: ChartDataSets[];

  public barChartType: ChartType = "bar";
  public barChartLegend = true;
  public barChartPlugins = [pluginDataLabels];



  ngOnInit() {
    //console.log("barChartData", this.barChartData);
  }
}

мой общий компонент html:

<div>
  <div>
    <div style="display: block">
      <canvas
        baseChart
        height="400"
        [datasets]="barChartData ? barChartData : []"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [plugins]="barChartPlugins"
        [legend]="barChartLegend"
        [chartType]="barChartType"
      >
      </canvas>
    </div>
  </div>
</div>

компонент, из которого я вызываю общий компонент (отдел-barchart.component.ts)

import { Component, OnInit } from "@angular/core";
import { ChartOptions, ChartType, ChartDataSets } from "chart.js";
import * as pluginDataLabels from "chartjs-plugin-datalabels";
import { Label } from "ng2-charts";
import { BarChartService } from "../../service/bar-chart.service";

@Component({
  selector: "app-department-wise-barchart",
  templateUrl: "./department-wise-barchart.component.html",
  styleUrls: ["./department-wise-barchart.component.css"]
})
export class DepartmentWiseBarchartComponent implements OnInit {
  public barChartData: ChartDataSets[];
  public parentChartData: ChartDataSets[];
  public myLabelsArray: Label[];
  public barChartLabels: Label[];
  public isDataAvailable: boolean = false;

  constructor(private barchartservice: BarChartService) {}

  ngOnInit() {
    this.barchartservice.getBarChartDataFromJSON("dept").subscribe(response => {
      this.parentChartData = response;
    });
  }
}

соответствующий HTML-код (employee-band-by-barchart.component.html),

<app-common-barchart
  [barChartData]="parentChartData"
  [barChartLabels]="myLabelsArray"
></app-common-barchart>

служебный файл (bar-chart.service.ts),

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";

@Injectable({
  providedIn: "root"
})
export class BarChartService {
  constructor(private http: HttpClient) {}

  private _url1: string = "../../assets/chart-dummy-data/emp-band.json";
  private _url2: string = "../../assets/chart-dummy-data/dept.json";

  getBarChartDataFromJSON(chartType): Observable<any> {
    if (chartType == "emp-band") {
      return this.http.get<any>(this._url1);
    } else if (chartType == "dept") {
      return this.http.get<any>(this._url2);
    } else {
      return this.http.get<any>(this._url2);
    }
  }  
}

мой файл json (emp-band.json)

[
  {
    "data": [2, 5, 9],
    "label": "Male",
    "stack": "1"
  },
  {
    "data": [4, 1, 3],
    "label": "Female",
    "stack": "1"
  }
]

Может ли кто-нибудь помочь мне в этой вышеупомянутой ситуации.

NB: Будет несколько компонентов одного типа (с разными наборами данных), которые будут одновременно вызывать общий компонент для отображения разных параметризованных данных.