Невозможно передать данные из API в ng2-диаграммы - PullRequest
Новая
       22

Невозможно передать данные из API в ng2-диаграммы

0 голосов
/ 25 марта 2020

Это моя диаграмма ng2 stati c данные в component.ts файле: 

  public mbarChartLabels:string[] = ['June', 'July', 'August', 'September', 'October', 'November'];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;

  public barChartColors:Array<any> = [
    {
      backgroundColor: 'rgba(95, 103, 245, 0.5)',
      borderColor: '#5200cc',
      pointBackgroundColor: 'rgba(105,159,177,1)',
      pointBorderColor: '#fafafa',
      pointHoverBackgroundColor: '#fafafa',
      pointHoverBorderColor: 'rgba(105,159,177)'
    },
    {
      backgroundColor: 'rgba(128, 237, 104,0.5)',
      borderColor: '#208000',
      pointBackgroundColor: 'rgba(77,20,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,20,96,1)'
    }
];
  public barChartData:any[] = [
    {data: [100,80,50,60,70,80], label: 'Approved'},
    {data: [60,80,80,30,40,90], label: 'Discounted'}
  ];

Это мой вызов API, с которого я получаю данные: 

    this._auth.approved_discounted().toPromise().then((res:any)=>{
      if(res){
        this.approved = parseInt(res["Approved"])
        this.discounted = parseInt(res["Discounted"])

        console.log(this.approved+" "+this.discounted)
       }
    });

Здесь я пытаюсь вставить данные this.approved & this.discounts в ng2-диаграмму, но она получает их. Как объединить мои данные API в диаграмме ng2?

1 Ответ

1 голос
/ 25 марта 2020

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

this.loadData = true;
this._auth.approved_discounted().toPromise().then((res:any)=>{
      if(res){
        this.approved = parseInt(res["Approved"])
        this.discounted = parseInt(res["Discounted"])

        console.log(this.approved+" "+this.discounted)
       }
       this.loadData = false;
    });

и в вашем html:

<canvas *ngIf="!loadData"></canvas> // или в вашем "графике" tag

offtopi c:

Я не знаю, почему вы используете Promise (возможно, вы пришли из простого js или из React / AngularJs). Попробуйте использовать Observables, это определено c для Angular. И присвоения имен ... "Approved_discounts", это не для Angular, это для php или любой другой. Использовать утвержденный скидкой - Angular Руководство по стилю кодирования

...