Angular 7では、Observableから結果を抽出するにはどうすればよいですか？

コードで修正する必要のある問題はたくさんあります。@JBNizetはすでにほとんどの問題について言及しているようです。

まずはサービスから始めましょう。

• 前述のように、rxjs6Angularアプリケーションで使用している場合は、使用したrxjs6構文の代わりにパイプ可能な演算子の構文を使用できますrxjs5。（出典：docs）
• 変更importのための場所をObservableするrxjsとmapしますrxjs/operators。（出典：docs）
• import { Http } from '@angular/http';冗長です。このパッケージは非推奨です。@angular/common/http代わりに使用してください。（出典：docs）
• Object非プリミティブボックス化オブジェクトを指すため、使用しないでください。（出典：docs）。代わりに、anyまたはさらに良い方法として、バックエンド応答を定義するインターフェースを作成してください。
• あなたのmap現在の書き方では、何もしません。代わりに、バックエンドがオブジェクトを返すdataので、を使用しmapてdata。だけを返すことができます。
• あなたのrefreshAPIが何をするのかはわかりませんが、currenciesAPIと同じデータを取得するだけの場合は、不要のようです。他のデータが含まれているかどうかわからないので、答えはそのままにしておきます。

このすべてを念頭に置いて、あなたCurrencyServiceは今のようになります

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { CurrenciesResponse, Currency } from 'path/to/your/interface';

@Injectable()
export class CurrencyService {
    constructor(
        private _http: HttpClient
    ) { }

    index(): Observable<Currency[]> {
        return this._http.get<CurrenciesResponse>('api/currencies').pipe(
            map((res: CurrenciesResponse) => res.data)
        );
    }

    refresh(): Observable<Currency[]> {
        return this._http.get<CurrenciesResponse>('api/refresh').pipe(
            map((res: CurrenciesResponse) => res.data)
        );
    }
}

インターフェイスは次のようになります

export interface CurrenciesResponse {
    data: Currency[];
    // Add other backend response properties here if present
}

export interface Currency {
    name: string;
    country: string;
    rate: number;
    // ...
}

インターフェイスを別のファイルに追加し、必要に応じてインポートします。

コンポーネントには、問題が1つしかないようです。あなたが起動したときに型引数を指定する必要はありませんindex()とrefresh()からcurrencyService、彼らは一般的な方法ではないからです。IDEは通常、次のようなエラーでこれについて警告する必要がありますExpected 0 type arguments, but got 1

currencies: Currency[] = [];
title: string = 'app';
apiStatus: string;

constructor(
    private _currencySrv: CurrencyService
) { }

ngOnInit() {
    this._currencySrv.index().subscribe(currencies => {
        this.currencies = currencies;
    });
}

refresh() {
    this._currencySrv.refresh().subscribe(currencies => {
        this.currencies = currencies;
    });
}

最後に、HTMLでは、データが含まれていない限り何も印刷されないため、ngIfは冗長です。ngForcurrencies

<ul *ngFor="let currency of currencies">
    <li>
        <div>{{currency.name}}</div>
        <div>{{currency.country}}</div>
        <div>{{currency.rate / 100}}</div>
    </li>
</ul>

StackBlitzの実際の例を次に示します。angular-in-memory-web-apiAPI応答に使用しました。