используя ngx-диаграммы и загружая данные из наблюдаемой

Question

Итак, я пытаюсь сделать простую гистограмму, такую ​​как эта (см. документация ).

Я получаю свои данные из наблюдаемой и попытка запустить обнаружение изменений в подписке, потому что данные не отображаются на диаграмме, но обнаружение изменений не помогает. Как получить данные для отображения на диаграмме, если они не загружены до инициализации представления?

Вот мой код:

bar-chart.component.ts

import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { DataLoadingService } from "../data-loading.service";

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.scss']
})
export class BarChartComponent implements OnInit {

  subscription: any;
  data: any;
  results: any[] = [];

  constructor(private dataService: DataLoadingService, private ref: ChangeDetectorRef) { }

  ngOnInit(): void {
      this.subscription = this.dataService.source.subscribe((val: any) => {
        this.data = val.body;
        for(let x = 0; x < this.data.length; x++) {
            let match = false;
            for(let y = 0; y < this.results.length; y++) {
                if (this.results[y]["name"] === this.data[x].outcome_level) {
                    match = true;
                    this.results[y]["value"] += 1;
                }
            }
            if(match === false) {
                this.results.push({"name": this.data[x].outcome_level, "value": 1})
            }
        }
        function compare(a: any, b: any) {
            if(a.name > b.name) return 1;
            if(a.name < b.name) return -1;

            return 0;
        }

        this.results.sort(compare);
        console.log(this.results);
        this.ref.detectChanges();
      } );
    console.log("from onInit: " + this.results);
  }

Вывод первого файла console.log выглядит следующим образом:

0: {name: "1", value: 3}
1: {name: "2", value: 6}
2: {name: "3", value: 1}
3: {name: "4", value: 2}

Вывод файла console.log ("from onInit:" + this.results) пуст

bar-chart.component. html

<ngx-charts-bar-vertical
  [results]="results"
  xAxis=true
  yAxis=true
  gradient=false
  legend=true
  showXAxisLabel=true
  showYAxisLabel=true
  xAxisLabel="OutcomeLevel"
  yAxisLabel="NumberOfProjects"
></ngx-charts-bar-vertical>