可观察和Angular2

Question

我在Angular 2中遇到Observables问题

我的组件在Init上调用服务函数，如下所示：

delivery: IDeliveryCountry[];

ngOnInit() {
  this.checkoutService._getInfo().subscribe(dev => this.delivery = dev); 
}

这是IDeliveryCountry界面的外观：

export interface IDeliveryCountry {
  iso: string;
  name: string;
}

这是Service的样子：

_getInfo(): Observable<IDeliveryCountry[]> {
    return this.http.get(this.deliveryCountryUrl)
    .map((response: Response) => <IDeliveryCountry[]>response.json()) 
}

带有数据的json文件如下所示：

[
  {
    "iso":"se",
    "name":"Sweden"
  },
  {
    "iso":"dk",
    "name":"Denmark"
  }
]

我的html文件只是一个简单的ngFor循环：

<div *ngFor='let dev of delivery'>{{dev.iso}}</div>

到目前为止，所有事情都运行良好，正如预期的那样，我在UI中返回了“ se”和“ dk”。

当我将json文件中的数据结构更改为以下内容时，会出现问题：

{
  "country": {
    "iso":"se",
    "name":"Sweden"
  }
}

我希望数据只有一个具有iso和name属性的国家。 所以我的html文件如下所示：

<div>{{delivery.iso}}</div>

但是我一直都在将iso定义为undefined

“无法读取未定义的属性'iso'

谢谢！

Answer 1

您首先应该使用：

{{delivery.country.iso}}

您收到的未定义错误是因为数据即将异步，因此请使用安全的导航运算符来避免这种情况：

{{delivery?.country?.iso}}

演示版

（可选）您可以提取country内部的数据，因此可以将模板中的代码从{{delivery?.country?.iso}}缩短为{{delivery?.iso}} ，可以这样进行：

.map(res => res.json().country) // extract the data from the object country

Answer 2

您可以不用ngFor来执行此操作，因为它是一个对象

<div>{{delivery.country.iso}}</div>

发表评论后，未定义是因为数据即将异步，因此请使用elvis运算符避免这种情况：

 {{delivery?.country?.iso}}

Answer 3

或者，您可以更改服务以返回DeliveryCountry []

getInfo(): Observable<IDeliveryCountry[]> {
  return this.http.get(this.deliveryCountryUrl)
  .map((response: Response) => response.json()) 
  .map(delivery => delivery.country);
}

然后：

ngOnInit() {
  this.checkoutService.getInfo()
  .subscribe(deliveryCountries => this.deliveryCountries = deliveryCountries);
}

然后：

<div *ngFor="let deliveryCountry of deliveryCountries">{{deliveryCountry?.iso}}</div>