使用Angular 7映射Chartjs的JSON

我正在尝试映射JSON数据以在条形图中显示它。我需要的最后一个数组必须如下所示：[883592517119271142758]。 实际上，我想要用来设置barChartData（dringlichkeitenValues[]）的数组似乎是空的。对不起，我的编码技术不好。有人能告诉我怎么解决这个问题吗

JSON:

api.service.ts

getDringlichkeiten(): Observable<IDringlichkeit[]> {
    return this.http.get<IDringlichkeit[]>(this.ROOT_URL + '/aufenthalte/dringlichkeit');}

条形图.component.ts

   export class BarChartComponent implements OnInit {

  public dringlichkeitValues:number[] = [];
  public dringlichkeiten: IDringlichkeit[];
  public barChartLabels:String[] = ["1", "2", "3", "4", "5"];
  public barChartData:number[] = this.dringlichkeitValues;
  public barChartType:string = 'bar';

  constructor(private aufenthaltService: AufenthaltService) {

  }

  ngOnInit() {
    this.loadData();
    this.getDringlichkeitValues();
  }

  loadData(){

    this.aufenthaltService.getDringlichkeiten()
    .subscribe( data => this.dringlichkeiten = data);
  }

  getDringlichkeitValues(){
    let dringlichkeitValues:number[]=[];
    this.dringlichkeiten.forEach(dringlichkeit=>{
      dringlichkeitValues.push(dringlichkeit.value)
      this.dringlichkeitValues = dringlichkeitValues;
    });
    return this.dringlichkeitValues;
  }

}

chart: Chart;
  dringlichkeiten: IDringlichkeit[] = [];


  constructor(private aufenthaltService: AufenthaltService) {
  }

  ngOnInit() {

    this.aufenthaltService.getDringlichkeiten()
    .subscribe( data => {
      this.dringlichkeiten = data;

      //dringlichkeiten-Array full
      console.log(this.dringlichkeiten);
    });

    //dringlichkeiten-Array empty
    console.log(this.dringlichkeiten);


    this.chart = new Chart('canvas', {
      type: 'bar',
      data: {
        labels: this.dringlichkeiten.map(x => x.id),
        datasets: [
          {
            label: 'Dringlichkeiten',
            data: this.dringlichkeiten.map(x => x.value),
            backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB']
          }
        ]
      },
    });


  }

更新： 我更新了我的组件，但现在我的数组在订阅了可观察对象后仍然是空的

条形图.component.ts

   export class BarChartComponent implements OnInit {

  public dringlichkeitValues:number[] = [];
  public dringlichkeiten: IDringlichkeit[];
  public barChartLabels:String[] = ["1", "2", "3", "4", "5"];
  public barChartData:number[] = this.dringlichkeitValues;
  public barChartType:string = 'bar';

  constructor(private aufenthaltService: AufenthaltService) {

  }

  ngOnInit() {
    this.loadData();
    this.getDringlichkeitValues();
  }

  loadData(){

    this.aufenthaltService.getDringlichkeiten()
    .subscribe( data => this.dringlichkeiten = data);
  }

  getDringlichkeitValues(){
    let dringlichkeitValues:number[]=[];
    this.dringlichkeiten.forEach(dringlichkeit=>{
      dringlichkeitValues.push(dringlichkeit.value)
      this.dringlichkeitValues = dringlichkeitValues;
    });
    return this.dringlichkeitValues;
  }

}

chart: Chart;
  dringlichkeiten: IDringlichkeit[] = [];


  constructor(private aufenthaltService: AufenthaltService) {
  }

  ngOnInit() {

    this.aufenthaltService.getDringlichkeiten()
    .subscribe( data => {
      this.dringlichkeiten = data;

      //dringlichkeiten-Array full
      console.log(this.dringlichkeiten);
    });

    //dringlichkeiten-Array empty
    console.log(this.dringlichkeiten);


    this.chart = new Chart('canvas', {
      type: 'bar',
      data: {
        labels: this.dringlichkeiten.map(x => x.id),
        datasets: [
          {
            label: 'Dringlichkeiten',
            data: this.dringlichkeiten.map(x => x.value),
            backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB']
          }
        ]
      },
    });


  }

要从JSON数组中获取“值”，可以使用：

dringlichkeiten.map(x => x.value)

这将为您提供所需的阵列，即：

[883, 5925, 17119, 27114, 2758]

然后，您可以将此数组传递给chartJS，以便它向您呈现如下图表：

this.chart = new Chart('canvas', {
  type: 'bar',
  data: {
    labels: dringlichkeiten.map(x => x.id),
    datasets: [
      {
        label: 'My Bar Chart',
        data: dringlichkeiten.map(x => x.value),
        backgroundColor: ['red', 'green', 'yellow', 'blue', 'orange']
      }
    ]
  },
});

请看一个简化的工作SlackBlitz示例

---

希望这有帮助

多谢各位！像U一样，在同一组件中定义数组是可行的。但是，如果我想在ngOnInit{}中使用loadData（）订阅我的Observable，那么数组似乎仍然是空的……当我订阅数据时，当我console.log（this.dringlickeiten）时，就像我需要它一样。你知道为什么局部变量dringlickeiten不变吗？我不太明白你的意思。看看您的

ngOnInit

方法，我建议删除该方法

getDringlichkeitValues（）

，因为我认为不需要它。该方法是导致您出现问题的原因吗？您的方法

getDringlickeitValues（）

将在

loadData（）

方法解决之前运行，因为这两个方法都是同步运行的

，因此，
this.dringlickeiten
在
getDringlickeitValues（）中始终为空
方法。我删除了此方法。你能检查一下我上面更新的课程吗？我放置了2个console.logs-第一个有值，第二个没有值。但是为什么呢？第二个
console.log
是空的，因为它是在加载组件时执行的，而另一个是在api调用返回数据后执行的。基本上，您需要在api调用完成后（即获得数据后）创建图表。看看SlackBlitz示例，它模拟了一个api调用。