Angular2 http 获取返回字符串的问题

Question

我有一个简单的 Flask 应用正在运行，它返回一个字符串

我的 Angular2 代码是根据我在网上看到的各种教程拼凑而成的网络服务.服务.ts

import { Component, OnInit, Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import {HttpModule} from '@angular/http';
import {JsonpModule} from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class WebService {
  constructor(private http: Http, private router: Router,private _jsonp: JsonpModule) { }

 public getDataFromBackend() {//
    return this.http.get('http://localhost:5000/getstuff')
    .map(data=>{
        data.json();
        console.log(data.json());
        return data.json();
    })
  }
}

App.Component.ts

import { Component , OnInit} from '@angular/core';
import { WebService } from './webservices/webservices.services';
import { Http, Response } from '@angular/http';
import { Router } from '@angular/router';
import {HttpModule} from '@angular/http';
import { RouterModule } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [WebService]
})
export class AppComponent implements OnInit {

  constructor(private http: Http,  private webservice: WebService, private router: Router) { }
  title: string = 'My first angular2-google-maps project';
  lat: number = 45.478418;
  lng: number = -122.209007;
  msgBackend: string = "";
  public ngOnInit(){

  }
 public getData(){
    this.webservice.getDataFromBackend()
      .subscribe(
      (data) => this.handleData(data),

      () => console.log('Write to console output')

      );
  }

    private handleData(data: Response) {
    if (data.status === 200) {
      let receivedData = data.json();
      console.log(receivedData);
      this.msgBackend= receivedData;
      return this.msgBackend;
    }


  }





}

因此，当我的应用程序运行时，它会命中 Flask 应用程序并返回 200。此外，控制台确实会写入“写入控制台输出”。我还尝试添加一个可观察的 Observable，但这没有用。我想我只是没有掌握 Angular2 http 和异步的东西。

编辑:console.log(receivedData)；为什么它不转到控制台？

Answer 1

如前所述，由于这不是 JSON，而是字符串，因此请改用 response.text()，如下所示:

public getDataFromBackend() {
  return this.http.get('http://localhost:5000/getstuff')
   .map(response => response.text())
}

在组件中:

public getData(){
  this.webservice.getDataFromBackend()
    .subscribe(data => {
       this.handleData(data),
  });
}

在您的handleData 中，我们不再处理Response，但此时数据只是一个简单的字符串:

private handleData(data: string) {
  console.log(data);
  this.msgBackend= data;
}