无法从数据服务获取 json 值到角度 4 中的组件答案

【问题标题】：Unable to get json value from data service to component in angular 4无法从数据服务获取 json 值到角度 4 中的组件
【发布时间】：2018-02-28 18:50:38
【问题描述】：

我正在从 Spring RESTful 服务中获得这样的 http post 请求的 json 响应

{"status":true,"Data":{"message":"Otp 生成成功请输入otp并登录"}}

在角度数据服务中我也得到了相同的结果，但无法将此 json 从数据服务功能传递到组件

activateapp-component 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 typescript angular5

【解决方案1】：

您在解决之前记录数据，更改为：

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

}

同时返回来自该服务的数据（删除 console.logs 和括号）：

.then((res) => res.json());

【讨论】：