时间戳

首页 > 解决方案 > 从来自后端的 Json 填充 Angular 中的谷歌饼图

angular - 从来自后端的 Json 填充 Angular 中的谷歌饼图

问题描述

我在正确填充谷歌饼图时遇到问题。

我正在构建一个视图。不要考虑表 和我在做的进步。

但是，我的 onInit 方法从 spring boot 获取一个 json 并尝试设置定义为employees的属性。在方法结束时检查它：

import { Component } from "@angular/core";
import { FormBuilder, FormGroup , Validators} from '@angular/forms'; 

import { Employee } from "src/app/ab-front/employee.interface";
import { HttpClient } from "@angular/common/http";
import { EmployeesService } from "src/app/ab-front/employees/employees.service";
import { OnInit } from "@angular/core";
import { FormControl } from "@angular/forms";
import { Input } from "@angular/core";

@Component({
    selector: 'ab-employee',
    templateUrl: 'employee.component.html',
    styleUrls: ['employee.component.css']

})

export class EmployeeComponent implements OnInit { 


    form : FormGroup;

    employees: Employee [] = [];

    @Input()
    pieChartData =  {
        chartType: 'PieChart',
        options: {'title': 'Dados do Pessoal',
                pieHole:0.4,
                chartArea: {
                    left:100,
                    top:50,
                    width: 400,
                    height: 300}

        },
        dataTable: this.populaChart()
    };

    populaChart(){
        let titulo : string [] = ['Nome','Participacao'];
        let linha = [];
        for(let i = 0 ; i < this.employees.length ; i++){
            linha [i] = [this.employees[i].nome + ' ' + this.employees[i].sobrenome , 
            this.employees[i].participacao];
            if(i < this.employees.length){
                linha [i] = linha [i] + ',';
            }
        }
        console.log(this.employees);
        return [
            titulo,
            ['Hugo Silva',  20],
            ['Eliza Souza', 20],
            ['Anderson Santos', 40]
        ];
    }

    constructor(private employeeService: EmployeesService,
        private formBuilder : FormBuilder){ }

        ngOnInit(){
            this.form = this.formBuilder.group({
                nome: ['', 
                    [
                        Validators.required,
                        Validators.pattern('([A-Z])([a-z])+'),
                        Validators.minLength(2)
                    ],
                ],
                sobrenome: ['', 
                    [
                        Validators.required,
                        Validators.pattern('([A-Z])([a-z])+'),
                        Validators.minLength(2)
                    ]
                ],
                participacao: ['', 
                    [
                        Validators.required,
                        Validators.pattern('[0-9]+'),
                        Validators.minLength(1)
                    ]
                ]
            });
                this.employeeService
                .listEmployees()
                .subscribe(employees => {
                    this.employees = employees;                    
                    console.log(this.employees);
                });    
        }
}

上面，console.log 打印一个包含 2 个元素的 json。然而，我尝试在 populaChart 方法上做同样的事情，在那里， 我得到了一个空变量。

有人知道会发生什么吗？而且，如何将来自后端和表单的 json 中的数据设置为饼图？

标签： angularspring-bootgoogle-visualization

解决方案

当下面的代码编译成 JavaScript 时，pieChartData = ...被放置在构造函数中，它在之前运行ngOnInit：

export class EmployeeComponent implements OnInit {
    // Runs in the constructor 
    pieChartData =  {
        chartType: 'PieChart',
        options: {'title': 'Dados do Pessoal',
                pieHole:0.4,
                chartArea: {
                    left:100,
                    top:50,
                    width: 400,
                    height: 300}

        },
        dataTable: this.populaChart()
    };

    ngOnInit() {
        // Runs after the constructor
        // Get employees
    }
}

因此，当它运行时，您还没有任何员工。从 API收到后，您应该pieChartData在内部创建。或者至少初始化为一个空数组，稍后当你有员工时更新它。ngOnInitemployeesdataTable

推荐阅读