Pipe、Map 和 Observable 无法检索 json

Question

在一个有角度的项目中，我拼命地尝试从 API 调用中获取可用的响应。
我尝试了很多方法：

这就是 API 的响应（在浏览器和邮递员中测试）：

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

我用 http 方法尝试了它在具有 observables 的服务组件中：

  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： Observable {source: Observable, operator: ƒ}

我也尝试过主要组件：

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

结果是一个未定义

..最后是服务组件中没有可观察对象的http方法（我仍然不明白这些简单的API调用中可观察对象的目的）：

  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}

Answer 1

你无法读取可观察的内容，你必须订阅它才能获取值，就像这样

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;
  });
}