管道、地圖和可觀察的無法檢索json

在一個角度專案中，我拼命地試圖從 API 呼叫中獲得可用的回應。
我嘗試了很多方法：

這是 API 回應的內容（在瀏覽器和郵遞員中測驗）：

{
  "cols": [
    [
      "Open", 
      "High", 
      "Low", 
      "Close", 
      "volume"
    ]
  ]
}

我在帶有 observables 的服務組件中使用 http 方法進行了嘗試：

  getDfColumns(): Observable<DfColumns[]>{

    return this.http.get<DfColumns[]>(this.URLColumns);

  }

以及我使用 get 方法呼叫函式的主要組件：

DfCols!:any;

  getCols() {

    this.DfCols = this.indicatorService.getDfColumns().pipe(map((response: any) => response.json()));
    console.log(this.DfCols)
  }

回傳一個空的可觀察物件：Observable {source: Observable, operator: ?}

我還嘗試了主要組件：

this.DfCols =  this.indicatorService.getDfColumns().subscribe(columns => {this.DfCols = columns;})

結果是一個undefined

..最后是沒有 observable 的服務組件中的 http 方法（在這些簡單的 API 呼叫中，我仍然不明白 observables 的目的）：

  getDfColumns(){
  
    return this.http.get(this.URLColumns);

  }

沒有什么幫助！那有什么問題？我怎樣才能得到正確的回應？

更新代碼：

主要組件（getCols() 由按鈕觸發）：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'
import { CallFunctionService } from 'src/app/services/call-function.service';
import {LoadIndicatorParamsService} from 'src/app/services/load-indicator-params.service';
//import { RestServiceDfinit } from 'src/app/services/rest-df-init.service';
import { DfIndicatorService } from 'src/app/services/rest-df-indicator.service';
import { DfColumns } from 'src/app/interface/df-indicator';
import { map } from 'rxjs/operators'

@Component({
  selector: 'app-formgroup-indicator',
  templateUrl: './formgroup-indicator.component.html',
  styleUrls: ['./formgroup-indicator.component.scss']
})
export class FormgroupIndicatorComponent implements OnInit {


  toggleAdd: boolean = false;
  toggleDelete: boolean = true;
  
  IndicatorGroup = new FormGroup({
    IndType: new FormControl(''),
    Ind: new FormControl(''),
    IndPeriod: new FormControl(''),
    IndOpt1: new FormControl(''),
    IndOpt2: new FormControl(''),
  });

  DfCols!:any;


  constructor(private callDfFunction: CallFunctionService, private IndicatorParams: LoadIndicatorParamsService, private indicatorService: DfIndicatorService) { }

  ngOnInit(): void {

  }

  getCols() {

    this.DfCols = this.indicatorService.getDfColumns().pipe(map((response: any) => response.json()));

    this.DfCols.subscribe((data:any) => console.log(data));
    console.log(this.DfCols)
  }

}

服務組件：

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs'
import { DfIndicatorRoot, DfColumns } from '../interface/df-indicator';
import {LoadIndicatorParamsService} from './load-indicator-params.service';
import { map } from 'rxjs/operators'


@Injectable({
  providedIn: 'root'
})
export class DfIndicatorService {


  URLColumns: string = "http://127.0.0.1:5000/df_columns/";



  constructor(private http: HttpClient) { 

  
  }
  getDfColumns(): Observable<DfColumns[]>{

    return this.http.get<DfColumns[]>(this.URLColumns);
    //console.log(this.DfColumns)
  }

界面：

export interface DfIndicatorRoot {
    ind: string;
    params: DfIndicatorParams[];
  }
  
  export interface DfIndicatorParams {
    ind_type: string;
    period: number;
    optional_param_1: number;
    optional_param_2: number;
  }


  export interface DfColumns { cols:object}

uj5u.com熱心網友回復：

您無法讀取 observable，您必須訂閱它才能獲取值，就像這樣

getCols() {
  this.indicatorService.getDfColumns().pipe(
    tap(() => console.log(response)),
    // I am not sure about this line it could be response.body just log it and check
    map((response: any) => response),
    take(1),
  ).subscribe((data) => {
    console.log(data)
    this.DfCols = data;
  });
}

標籤：有角度的

上一篇：javascripttypescript創建一個物件

下一篇：我應該重構我的專案以使用NGRX嗎？