Question

我想通过HttpClient方法从角度调用数据库中的某些数据。然后，我将格式化某些图表的数据。这两个方法是用于获取数据的“ getData”，另一个方法是用于格式化数据的dataFormatter（）。我可以调用数据，它会登录到浏览器控制台，但是，我无法用其他方法进一步处理该数据……为什么？

不知何故，我认为这是一个订阅问题，因为似乎数据没有传递到我的第二种方法中。

import { Component, OnInit,NgModule } from '@angular/core';
import { Injectable } from '@angular/core';
import { catchError, map, tap } from 'rxjs/operators';
import { Http,Response} from '@angular/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { GeneralhttpserviceService } from '../services/generalhttpservice.service';
import { ChartdataformatterService } from '../services/chartdataformatter.service';

@Component({
  selector: 'anlagenstatus',
  templateUrl: './anlagenstatus.component.html',
  styleUrls: ['./anlagenstatus.component.scss']
})
export class AnlagenstatusComponent implements OnInit {
  private base_url = 'localhost:5555/DNZ/';
  private suff_url = 'Status/betrieb/Status';
  dataArray: any;
  chartArray: any[];
  formattedData: any;

  showXAxis = true;
  view = [1500,600];
  timeline = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = false;
  xAxisLabel: string = "Zeitwerte";
  showYAxisLabel = false;
  yAxisLabel: string = "Betriebswerte";
  autoScale = true;
  tooltipDisabled = false;
  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  constructor( private http: HttpClient, private genHttp: GeneralhttpserviceService, private chartFormatter: ChartdataformatterService) {   }

  ngOnInit() {
    this.formattedData= this.anlagenstatusDataFormatter();
  }


  //all HttpClient return an RxJS Observable of something
  //HttpClient.get returns the body of the response as an untyped JSON object by default. 
  //To catch errors, you "pipe" the observable result from http.get() through an RxJS catchError() operator.
  getData(suffurl: string, id? :number): Observable<any[]> {
    return this.http.get<any[]>('http://localhost:5555/DNZ/'+ this.suff_url)
    .pipe(
      map(data => data),
      tap(data => console.log("Anlagenstatus Daten:", data)),
      catchError(this.handleError('getData',[]))
    )
  }
    /*.pipe(subscribe(Response => { console.log(Response)})
      tap(data => console.log("Anlagenstatus Daten:", data)),
      catchError(this.handleError('getData',[]))      
    )*/

    anlagenstatusDataFormatter():any {   
      this.dataArray = this.getData(this.suff_url).subscribe(Response => { console.log("response:",Response)});
      console.log("Pre-Formatted data:", this.dataArray);   
      for (var elem of this.dataArray) {
        var entrydict ={ 
            name: elem["_id.Demonstrator"],
            series: [{ 
              name: elem["_id.betriebsbereit"],
              value: elem["Anzahl"]          
          }]  
        }
        this.chartArray.push(entrydict);
      } 
      console.log("Formatted Anlagenstatusdaten:",this.chartArray);
      return this.chartArray;
    }


  /**
 * Handle Http operation that failed.
 * Let the app continue.
 * @param operation - name of the operation that failed
 * @param result - optional value to return as the observable result
 */
  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      console.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }
}

edit：我的变量this.dataArray的返回值某种程度上是“ Subscriber”类型的。。。它似乎已关闭..如何获取正确的数据格式或再次订阅它，以便我可以处理进一步的数据？

Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}
closed
:
true

Answer 1

您需要订阅可观察对象，并且一旦接收到数据，就只能通过将其传递给第二个函数来格式化数据。

this.getData(this.suff_url).subscribe(Response => {          
    console.log("response:",Response);
    // format the response here
});

如果您希望await工作，可以使用toPromise

将订阅转换为Promise

await this.getData(this.suff_url).toPromise()

Angular HttpClient订阅...没有返回数据？

1 个答案: