Question

我正在尝试从Angular 6使用HttpClient，但遇到了一些问题。

我的代码如下：

TS

btc = this.http.get<any>(this.btcurl).subscribe(res => this.btc = res);

  eth = this.http.get<any>(this.ethurl).subscribe(res => this.eth = res);

  ltc = this.http.get<any>(this.ltcurl).subscribe(res => this.ltc = res);

  progressInfoData = [
    {
      title: 'Bitcoin (BTC) Price',
      value: this.btc,
      activeProgress: 70,
      description: 'Better than last week (70%)',
    },
    {
      title: 'Ethereum (ETH) Price',
      value: this.eth,
      activeProgress: 30,
      description: 'Better than last week (30%)',
    },
    {
      title: 'Litecoin (LTC) Price',
      value: this.ltc,
      activeProgress: 55,
      description: 'Better than last week (55%)',
    },
  ];

如您所见，我从URL获取信息，然后将该信息保存在数组中。问题是当我打印此信息时，我没有得到json对象。

HTML ：

<nb-card size="medium">
  <nb-card-body>
    <div class="progress-info" *ngFor="let item of progressInfoData | async">
      <div class="title">{{ item.title }}</div>
      <div class="value">{{ item.value.EUR }}</div>
      <nb-progress-bar [value]="item.activeProgress"></nb-progress-bar>
      <div class="description">
        <bdi>{{ item.description }}</bdi>
      </div>
    </div>
  </nb-card-body>
</nb-card>

但是，如果我直接在html代码中输入var，则：

 <div class="value">{{ btc.EUR }}</div>

它可以正确打印信息。你知道为什么会这样吗？

谢谢！

Answer 1

在HTML代码段中，async与progressInfoData一起使用了管道，但是progressInfoData并不是可观察的。数组中的可观察对象只是value属性。因此，async管道应该与value一起使用。

<nb-card size="medium">
  <nb-card-body>
    <div class="progress-info" *ngFor="let item of progressInfoData">
      <div class="title">{{ item.title }}</div>
      <div class="value">{{ (item.value | async)?.EUR }}</div>
      <nb-progress-bar [value]="item.activeProgress"></nb-progress-bar>
      <div class="description">
        <bdi>{{ item.description }}</bdi>
      </div>
    </div>
  </nb-card-body>
</nb-card>

更改在这里：

<div class="progress-info" *ngFor="let item of progressInfoData">

<div class="value">{{ (item.value | async)?.EUR }}</div>

由于在模板上使用async管道，因此无需在组件中订阅它-就像上面提到的Patricio Vargas一样。因此，您可以摆脱该组件中的订阅。

HttpClient不在Angular 6中检索json数据

1 个答案: