从 API 中检索数据并显示在饼图中

共1个回答,已解决, 标签: angular ngx-charts

我在以 json 的形式显示从 API 下载的数据时遇到了问题。数据不会在饼图、ngx-xs 中显示/刷新, 静态数据工作良好。我已经阅读了所有关于 ngx 图表和角度的帖子, 但我还没有找到解决我的问题的办法。

Ts 的代码

public memoryapi
  public memoryinfo
  public single =  [
    {
        "name": "",
        "value": 34,

    },

    {
      "name": "Free Memory",
      "value": 8,
  }
];




  ngOnInit(){
    this.getInfo()


  }



  getInfo() {

    let info;
    info = this.http.get('request to API')
    info.subscribe(listcapacityresponse => {

      this.memoryapi = listcapacityresponse.listcapacityresponse.capacity[0]
      this.single[0].name = this.memoryapi.name
      this.single[0].value = this.memoryapi.percentused


 }

    )}

  view: any[] = [350, 300];

  // options
  showLegend = false;

  colorScheme = {
    domain: ['#5AA454', '#A10A28']
  };

  // pie
  showLabels = true;
  explodeSlices = true;
  doughnut = true;


  onSelect(event) {
    console.log(event);
  }


}

模板文件:

原料药回应

{"listcapacityresponse":{"count":10,"capacity":[{"type":0,"name":"MEMORY","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityallocated":2952790016,"capacityused":2952790016,"capacitytotal":34359738368,"percentused":"8.59"},{"type":1,"name":"CPU","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityallocated":2500,"capacityused":2500,"capacitytotal":128000,"percentused":"1.95"},{"type":2,"name":"STORAGE","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":0,"capacitytotal":4398046511104,"percentused":"0"},{"type":3,"name":"STORAGE_ALLOCATED","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":138512695596,"capacitytotal":8796093022208,"percentused":"1.57"},{"type":4,"name":"VIRTUAL_NETWORK_PUBLIC_IP","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":3,"capacitytotal":199,"percentused":"1.51"},{"type":5,"name":"PRIVATE_IP","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":6,"capacitytotal":199,"percentused":"3.02"},{"type":6,"name":"SECONDARY_STORAGE","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":0,"capacitytotal":0,"percentused":"0"},{"type":7,"name":"VLAN","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":1,"capacitytotal":101,"percentused":"0.99"},{"type":19,"name":"GPU","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":0,"capacitytotal":0,"percentused":"0"},{"type":90,"name":"CPU_C
第1个答案(采用)

两年前我也遇到了同样的问题。这就是解决办法。只要改变你的逻辑,

  public single =  [];

  ...

  getInfo() {

    let info;
    info = this.http.get('request to API')
    info.subscribe(listcapacityresponse => {

    this.memoryapi = listcapacityresponse.listcapacityresponse.capacity[0]
    this.single =
     [{
       "name": this.memoryapi.name,
       "value": this.memoryapi.percentused
      },
      {
       "name": "Free Memory",
       "value": 8
      }]

您需要一次初始化您的数组。你 *ngIf 的用法是正确的, 但在你的情况下是无用的, 因为你已经 single 在类定义中定义了你的变量。

相关问题

从 angularcli 中的 HTTP Get 请求检索到的数组的范围 如何将角2前置快速 JS 变量导出到角2分量? Angular block web 请求使用的服务器吗? 从 API 中检索数据并显示在饼图中