java - 如何使用 java 休息来使用 Angular 渲染 nv3d 烛台图？

Question

我正在尝试将 nvd3d 烛台图与 Angular 一起使用，但在使用 Java 内置的休息服务时我无法渲染它。

如何使用 java 休息来使用 Angular 渲染 nv3d 烛台图？

我的休息正在返回这个:

[{"id":450,"vwap":3821.62,"faixa":69.48,"开盘":3858.7,"最高价":3863.29,"最低价":3793.81,"收盘价":3795.54, “日期”:19338}]

组件期望这样:

[{values:[{"id":450,"vwap":3821.62,"faixa":69.48,"开盘":3858.7,"最高":3863.29,"最低":3793.81,"收盘":3795.54,"日期":19338}]}]

我的 Angular 代码:

import { Injectable } from '@angular/core';
import { Provider, SkipSelf, Optional, InjectionToken } from '@angular/core';
import { Response, Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import { HttpInterceptorService, RESTService } from '@covalent/http';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';


export interface IDolFutDiario {
id: number;
  date: number;
  open: number;
  high: number;
  low: number;
  close: number;
  vwap: number;
  faixa: number;
}

@Injectable()
export class DolfudiarioService extends RESTService<IDolFutDiario>{

  constructor(private _http: HttpInterceptorService) {
    super(_http, {
      baseUrl: 'http://localhost:8080', 
      path: '',
    });
  }

  staticQuery(): Observable<IDolFutDiario[]> {

    return this.http.get('http://localhost:8080/dolfutdiarios')
        .map(this.extractData)
        .catch(this.handleErrorObservable);
  }

  extractData(res: Response) {
    let body = res.json();
    return body;
 }  

 private handleErrorObservable (error: Response | any) {
    console.error(error.message || error);
    return Observable.throw(error.message || error);
    }
}

我的Java代码:

@RestController
public class DolFutRestController {

    @Autowired
    DolFutDiarioService dolFutDiarioService;

    @RequestMapping(value = "dolfutdiarios", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
    public ResponseEntity<List<DolFutDiario>> list() {
        List<DolFutDiario> dolfutdiarios = dolFutDiarioService.listDolFutDiarios();
        return ResponseEntity.ok().body(dolfutdiarios);
    }   
}

PS:当我放置第二个数据 block [[values: ..... 时，它起作用了。但是，当我从 Java 服务获取时，却没有。也没有返回任何错误。

Answer 1

好吧，您需要将获得的数据 block 转换为您想要的数据 block 。如果您使用错误的格式，它将无法工作。问题的关键就在这个方法:

extractData(res: Response) {
    let body = res.json();
    return body;
}

在那里您可以将数据映射到您需要的内容；例如，如果您想将其包装在值对象中，请像这样操作:

extractData(res: Response) {
    const body = res.json();
    return [{ values: body }];
}

此外，尝试以不同的步骤console.log检查您的代码，看看您拥有什么并与您需要的进行比较!