以角度从 httpclient 中分离数据

问题描述

大家好，我在从 HTTPClient 中分离数据时遇到问题 click on the link the image shows data fetching from api

我想在单独的变量中分隔每一列。例如，一个变量中的所有 Ramp_Value，另一个变量中的 ProgressBar1_Value。等等，以便我可以在图表中使用它。或者如果您有更好的方法，请告诉我。提前致谢。

    export interface TrendForData {
          Dated?: string;
          ProgressBar1_Value?: number;
          Ramp_Value?: number;
          Ramp2_Value?: number;
          Ramp3_Value?: number;
          Ramp4_Value?: number;
          Ramp5_Value?: number;
          Random_Value?: number;
        }
       export class AppComponent implements OnInit {
        TrendDataMap: TrendForData = {};
          refreshTrendData() {
            this.service.getTrendData().subscribe(data=>{
             return this.DataTrend=data;
              
              console.log(this.DataTrend);
              });
          }
          
          setParams() {
            const responSEObject = this.DataTrend;
            Object.keys(responSEObject).forEach(key => {
              this.TrendDataMap[key] = responSEObject[key];
            });
          }
         ngOnInit() {
    
        this.setParams();
    
        console.log(this.TrendDataMap.Dated);
        console.log(this.TrendDataMap.ProgressBar1_Value);
        console.log(this.TrendDataMap.Ramp2_Value);
        console.log(this.TrendDataMap.Ramp3_Value);
        console.log(this.TrendDataMap.Ramp4_Value);
        console.log(this.TrendDataMap.Ramp5_Value);
        console.log(this.TrendDataMap.Ramp_Value);
        console.log(this.TrendDataMap.Random_Value);
      }
}

我更新了代码，没有出现错误，但也没有数据显示在浏览器控制台中未定义。

解决方法

您可以在下面使用它，将每个值分隔为唯一变量并不是一个好主意，我希望更好地将其堆叠到对象中

    import { Component,OnInit,VERSION } from "@angular/core";

export interface TrendForData {
  Dated?: string;
  ProgressBar1_Value?: number;
  Ramp_Value?: number;
  Ramp2_Value?: number;
  Ramp3_Value?: number;
  Ramp4_Value?: number;
  Ramp5_Value?: number;
  Random_Value?: number;
}

@Component({
  selector: "my-app",templateUrl: "./app.component.html",styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
  TrendDataMap: TrendForData = {};
  getResult() {
    return {
      Dated: 1,ProgressBar1_Value: 2,Ramp_Value: 3,Ramp2_Value: 4,Ramp3_Value: 5,Ramp4_Value: 6,Ramp5_Value: 7,Random_Value: 8
    };
  }

  setParams() {
    const responseObject = this.getResult();
    Object.keys(responseObject).forEach(key => {
      this.TrendDataMap[key] = responseObject[key];
    });
  }
  ngOnInit() {
    this.setParams();

    console.log(this.TrendDataMap.Dated);
    console.log(this.TrendDataMap.ProgressBar1_Value);
    console.log(this.TrendDataMap.Ramp2_Value);
    console.log(this.TrendDataMap.Ramp3_Value);
    console.log(this.TrendDataMap.Ramp4_Value);
    console.log(this.TrendDataMap.Ramp5_Value);
    console.log(this.TrendDataMap.Ramp_Value);
    console.log(this.TrendDataMap.Random_Value);
  }
}

沙盒游戏 https://stackblitz.com/edit/angular-ivy-bh3rkd?file=src/app/app.component.ts