无法从数据服务到angular 4中的组件获取json值

我从spring restful服务获得了针对http post请求的json响应，如下所示

import { Component, OnInit } from '@angular/core';
import {DataService} from '../data.service';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

@Component({
  selector: 'app-activateapplication',
  templateUrl: './activateapplication.component.html',
  styleUrls: ['./activateapplication.component.css']
})
export class ActivateapplicationComponent implements OnInit {

  constructor(private dataService: DataService,private http: Http, private httpClient: HttpClient, private route: Router) { }

  userMail='';
  otpResponse:JSON;

  ngOnInit() {
    this.generateOTP();
  }

  generateOTP() {
    this.userMail='rajasekhar.pippalla@valuelabs.com';
    this.dataService.generateOTP(this.userMail).then(otpResponse => this.otpResponse = otpResponse);
     console.log("OTP response: "+this.otpResponse);
  }

}

{“状态”：true，“数据”：{“消息”：“请成功生成Otp” 输入otp并登录“}”

在angular data service中，我也得到了相同的结果，但无法将此json从数据服务函数传递到组件

激活EAPP组件ts代码：

import { Component, OnInit } from '@angular/core';
import {DataService} from '../data.service';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

@Component({
  selector: 'app-activateapplication',
  templateUrl: './activateapplication.component.html',
  styleUrls: ['./activateapplication.component.css']
})
export class ActivateapplicationComponent implements OnInit {

  constructor(private dataService: DataService,private http: Http, private httpClient: HttpClient, private route: Router) { }

  userMail='';
  otpResponse:JSON;

  ngOnInit() {
    this.generateOTP();
  }

  generateOTP() {
    this.userMail='rajasekhar.pippalla@valuelabs.com';
    this.dataService.generateOTP(this.userMail).then(otpResponse => this.otpResponse = otpResponse);
     console.log("OTP response: "+this.otpResponse);
  }

}

dataservice.ts:

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { Router } from '@angular/router';
import { OnInit } from '@angular/core';
import 'rxjs/add/operator/toPromise';
import { HttpClientModule } from '@angular/common/http';

@Injectable()
export class DataService implements OnInit {
 ngOnInit(): void {
 }

private headers = new Headers({'Content-Type': 'application/json'});

  constructor(private http: Http,private router: Router) {}

  //generate OTP
  generateOTP(userMailID: string): Promise<JSON> {
    return this.http
      .post('http://localhost:8080/application/generateotp', userMailID , {headers : this.headers})
      .toPromise()
      .then(res => { res.json() as JSON;
        console.log(res.json().status);
        console.log("otp res in dataservice:: "+JSON.stringify(res.json()));  // Getting mentioned json object with this console
      }
    )
      .catch(this.handleError);
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Headers，Http}；
从'@angular/Router'导入{Router}；
从“@angular/core”导入{OnInit}；
导入“rxjs/add/operator/toPromise”；
从'@angular/common/http'导入{HttpClientModule}；
@可注射（）
导出类DataService实现OnInit{
ngOnInit（）：void{
}
私有头=新头（{'Content-Type'：'application/json'}）；
构造函数（专用http:http，专用路由器：路由器）{}
//生成OTP
GenerateOpp（userMailID:string）：承诺{
返回此文件。http
.post（'http://localhost:8080/application/generateotp，userMailID，{headers:this.headers}）
.toPromise（）
.然后（res=>{res.json（）作为json；
log（res.json（）.status）；
console.log（“dataservice中的otp res:：”+JSON.stringify（res.JSON（））；//使用此控制台获取提到的JSON对象
}
)
.接住（这个.把手错误）；
}
}

如果在解析数据之前正在记录数据，请更改为：

  generateOTP() {
    this.userMail='rajasekhar.pippalla@valuelabs.com';
   this.dataService.generateOTP(this.userMail).then(otpResponse => {
      console.log("OTP response: "+otpResponse);
      this.otpResponse = otpResponse
   });

}

同时从then服务返回数据（删除console.logs和括号）：