首页 > 解决方案 > Angular6 HttpClient 无法获取 Json

问题描述

根据Angular文档中的HttpClient。

HttpClient.get() 方法将 JSON 服务器响应解析为匿名 Object 类型。它不知道那个物体的形状是什么。

我的问题是我无法直接获取 Json。我仍然需要 Json.parse 在 dash-board.component.ts

dashboard.component.ts

import { PhoneBasicInfo } from './../Models/PhoneBasicInfo';
import { DashBoardServiceService } from './../Services/dash-board-serv 
ice.service';
import { Component, OnInit } from '@angular/core';
import { PhoneRecord } from '../Models/PhoneRecords';
@Component({
  selector: 'app-dash-board',
  templateUrl: './dash-board.component.html',
  styleUrls: ['./dash-board.component.css']
})
export class DashBoardComponent implements OnInit {
  constructor(private service: DashBoardServiceService) { }
  temp:any;
  basicInfo: PhoneBasicInfo;
  ngOnInit() {
      this.service.getPhoneBasicInfo()
          .subscribe(
            basic => {
            console.log(basic['companyName'])    <- I should get the Json Object.
            console.log(JSON.parse(basic));      <- I should not do this.
      }
    );
  }
}

对不起,我的声誉不足以嵌入图片

控制台图片

我使用 JSON.parse 来获取数据。然而,这似乎不正确。

所以我的问题是通过 HttpClient 获取 Json 的正确方法是什么?

太感谢了。

仪表板-service.service.ts

import { PhoneBasicInfo } from './../Models/PhoneBasicInfo';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { CATCH_ERROR_VAR } from 
'@angular/compiler/src/output/abstract_emitter';

@Injectable({
   providedIn: 'root'
})
export class DashBoardServiceService {
  private url = 'http://localhost:57302/api/Phone';
  constructor(private http:HttpClient) { }

  getPhoneBasicInfo(): Observable<PhoneBasicInfo>{
  return this.http.get<PhoneBasicInfo>(this.url);
 }
}

PhoneBasicInfo.ts

export class PhoneBasicInfo{
    companyName:string;
    firstTrade: string;
}

标签: angularangular-httpclient

解决方案


感谢你们。我的问题来自服务器 API。再次感谢你。


推荐阅读