在 angular 中将数据与 httpclient 分开

Question

大家好我在从 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);
      }
}

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

Answer 1

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

    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

在 angular 中将数据与 httpclient 分开

Separating data from httpclient in angular

angular

typescript

angular-httpclient