Angular 5-获取对象时出错
Angular 5-获取对象时出错
提问于 2018-06-25 05:10:34
我是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
}
}currency.service
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);
}
}currencycomponent.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接口：
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中正确获取对象类型
回答 2
Stack Overflow用户
发布于 2018-06-25 05:14:01
使用安全导航操作符？：
<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>Stack Overflow用户
发布于 2018-06-25 05:16:10
尝试在html中使用"employees?.rates“。
问题是你的html是在你的数据返回之前渲染的，而且由于利率是未定义的，你不能访问usd。
？运算符将检查是否为空或未定义，并成功返回。
另外，您确定employees不是一个数组吗？你需要做一个ngRepeat吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51013991
复制相关文章
相似问题