可观察和 Angular2答案

【问题标题】：Observable and Angular2可观察和 Angular2
【发布时间】：2017-07-28 10:15:44
【问题描述】：

我对 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’”

谢谢！

【问题讨论】：

当我将 json 文件中的数据结构更改为以下内容时出现问题： ...您在哪里更改它？后端？如果是这样，那么您实际收到的数据是什么？当您尝试打印 delivery.iso 时，您为 delivery 分配了什么。它只是{ "country":{ "iso":"se", "name":"Sweden" } } 你的问题有点不清楚，至少对我来说：D
我在我的 API 中对其进行了更改，以便返回 { "country":{ "iso":"se", "name":"Sweden" } } 而不是 [ { "iso":"se ", "name":"瑞典" }, { "iso":"dk", "name":"丹麦" } ]

标签： json angular observable

【解决方案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

【讨论】：

和我回答的不一样？
我没有看到安全导航操作员那里？
评论里有
非常感谢！！！你是对的，我刚刚看到 :) 安全导航操作使其工作。谢谢你们俩！！！
@Sajeetharan 好吧，我没有看 cmets，只是答案（当时没有安全导航操作员），我认为我开始时甚至可能没有评论写我的答案......当然我不会发布重复的答案，我没那么疯狂;）

【解决方案2】：

你可以在没有 ngFor 的情况下这样做，因为它是一个对象

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

在你的 cmets 之后， undefined 是因为数据是异步的，所以使用 elvis 运算符来避免这种情况：

 {{delivery?.country?.iso}}

【讨论】：

不，我也尝试过，但我得到“无法读取未定义的属性'国家'”我还更改了交货声明：IDeliveryCountry[];到货：IDeliveryCountry； Observable 也一样： _getInfo(): Observable { return this.http.get(this.deliveryCountryUrl) .map((response: Response) => response.json()) .do(data => console.log('All:' + JSON.stringify(data))) .catch(this.handleError); }
这就是当我在 Observable {"country":{"iso":"se","name":"Sweden"}} 中有 .do 时数据在控制台中的样子
应该能打印出来，你可以试试这个{{delivery?.country?.iso}}

【解决方案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>

【讨论】：