Pipe、map和observable无法检索json

Question

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

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

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

我在一个具有可观察性的服务组件中尝试了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

最后是一个没有可观察的服务组件中的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;
});
}