Question

我在Angular 2中有Observables的问题

我的组件在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和name属性的国家/地区。所以我的html文件如下所示：

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

但是我总是把iso视为未定义

“无法读取未定义的属性'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>

发表评论后，undefined是因为数据是异步的，所以请使用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>

可观察和Angular2

3 个答案: