json - Angular 5 - 获取对象时出错

标签 json angular object observable

我是 Angular 5 的新手,正在尝试从外部 API 显示对象。它显示数据但由于对象类型而引发错误

来自fixer.io的json数据

{
"success":true,
"timestamp":1529865488,
"base":"EUR",
"date":"2018-06-24",
"rates":{
  "USD":1.165473,
  "AUD":1.565348,
  "CAD":1.546355,
  "PLN":4.319264,
  "MXN":23.309846
}
}

货币.服务

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { CurrencyListMain } from './currencyList1';
import { Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CurrencyService {

private _url:string = "http://data.fixer.io/api/latest";
constructor(private http: HttpClient) { }

getEmployee(): Observable<CurrencyListMain>{
return this.http.get<CurrencyListMain>(this._url);
}
}

货币组件.ts:

import { Component, OnInit } from '@angular/core';
import { CurrencyService } from '../currency.service';

@Component({
selector: 'app-currency',
template: `<h2>Employee List</h2>
          <ul >
            <li>success: {{employees.success}}</li>
            <li>timestamp: {{employees.timestamp}}</li>
            <li>base: {{employees.base}}</li>
            <li>rates: </li>
            <li>USD: {{employees.rates.USD}}</li>
            <li>AUD: {{employees.rates.AUD}}</li>
            <li>CAD: {{employees.rates.CAD}}</li>
            <li>PLN: {{employees.rates.PLN}}</li>
            <li>MXN: {{employees.rates.MXN}}</li>
          </ul>`,
 styleUrls: ['./currency.component.css']
})
export class CurrencyComponent implements OnInit {

public rates = {}
public employees = {};

constructor(private _currencyService: CurrencyService) { }

ngOnInit() {
this._currencyService.getEmployee()
.subscribe(data => this.employees = data);
}
}

currencylist1.ts - 接口(interface):

import {UserRatesList} from './userRates' ;
export interface CurrencyListMain{
success:string,
timestamp:string,
base:string,
date:string,
rates: UserRatesList
}

userRates.ts 接口(interface):

export interface UserRatesList{
USD:number,
AUD:number,
CAD:number,
PLN:number,
MXN:number
}

出现以下错误:

 CurrencyComponent.html:5 ERROR TypeError: Cannot read property 'USD' of 
undefined
at Object.eval [as updateRenderer] (CurrencyComponent.html:7)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:10776)
at checkAndUpdateView (core.js:10152)
at callViewAction (core.js:10388)
at execComponentViewsAction (core.js:10330)
at checkAndUpdateView (core.js:10153)
at callViewAction (core.js:10388)
at execComponentViewsAction (core.js:10330)
at checkAndUpdateView (core.js:10153)
at callWithDebugContext (core.js:11040)

如何正确获取observable中的对象类型

最佳答案

尝试在 html 中使用“employees?.rates”。

问题是您的 html 在数据返回之前呈现,并且由于汇率未定义,您无法访问美元。

那个?运算符将检查 null 或未定义并成功返回。

另外,你确定员工不是一个数组吗?你需要做 ngRepeat 吗?

关于json - Angular 5 - 获取对象时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51013991/

相关文章:

asp.net-mvc - return Json 将在指定 Url 时重定向到另一个 View

android - 如何在 POST 请求中将 JSON 作为 BODY 从 Android 应用程序发送到服务器?

javascript - 如何在 Angular 6 中运行第三方 JS 脚本

javascript - 数组中的项目无法识别。 - 杰斯

java - Jersey 自定义 JSON 响应

python - 在 Pandas 中将外部 json 与嵌套的 json 结合起来并创建新的数据框

angular - 如何通过 Angularfire 5.0 从 Firebase 列表中获取 key

javascript - Angular UrlResolver 未被自定义提供程序覆盖

php - 关于定义类的 PHP 问题中的 OOP 新手

C++构造函数调用另一个构造函数