可观测性与Angular2

Question

我对2号角的可观测值有异议。

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

delivery: IDeliveryCountry[];

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

这是界面看起来像IDeliveryCountry的样子：

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

这是服务的样子：

_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和名称属性为它。因此，我的html文件如下所示：

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

但我一直都是个未知数

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

谢谢!

Answer 1

你应该首先使用：

{{delivery.country.iso}}

您所得到的未定义错误，是因为数据即将出现异步，因此请使用safe navigation operator来避免这种情况：

{{delivery?.country?.iso}}

Demo

还可以选择提取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>