Angular In-Memory Web API .data属性の使用方法は？

Question

私の目標は、実際のバックエンドとin-memory-web-apiを同じ意味で使用することです。

角度2（または4）英雄チュートリアルhttps://angular.io/tutorial/toh-pt6#extracting-the-data-in-the-then-callbackのツアーに述べたように：

なお、サーバが返すデータの形状を。この特定の メモリ内Web APIの例は、dataプロパティを持つオブジェクトを返します。 API が返される可能性があります。ウェブ APIに一致するようにコードを調整します。

mocked web apiサービスは、データ属性でラップされたオブジェクトを返します。問題は、バックエンドがその形式のデータを返さず、 "データ"属性を持たないことです。

.then(response => response.json().data as Hero[]) 

は

.then(response => response.json() as Hero[]) 

であるべきで、うまくいけばそれが動作するはずです。 2番目のバージョンに変更すると、メモリ内のAPIはもう機能しません...

in-memory-web-apiを変更して実際にそのデータ属性を削除する方法はありますか？

Answer 1

は、ここでは、このために私のソリューションです：

import { InMemoryDbService, RequestInfo } from 'angular-in-memory-web-api'; 
 
import { ResponseOptions } from '@angular/http'; 
 

 
export class InMemoryDataService implements InMemoryDbService { 
 
    myData = 'any data'; 
 
    createDb() { 
 
     let myData = this.myData; 
 
     return {myData}; 
 
    } 
 

 
    protected responseInterceptor(res: ResponseOptions, ri: RequestInfo): ResponseOptions { 
 
     res.body = this.myData; 
 
     return res; 
 
    } 
 
    
 
}

デフォルトでは、インメモリDBは、データ{： 'は任意のデータを'}返すことの体内に。 responseInterceptorでは、任意のタイプのデータに変更できます。 もちろん、これは非常に単純化されたバージョンです。

Answer 2

@アンの答えを少し微調整します。

import { InMemoryDbService, RequestInfo } from 'angular-in-memory-web-api'; 
import { ResponseOptions } from '@angular/http'; 

class AnyData{ 
    data: any; 
} 

export class InMemoryDataService implements InMemoryDbService { 
    createDb() { 
     let myDataA = [{...}]; 
     let myDataB = [{...}]; 
     let myDataC = [{...}]; 
     return { "A":myDataA, 
      "B":myDataB, 
      "C":myDataC }; 
    } 

    protected responseInterceptor(res: ResponseOptions, ri: RequestInfo): ResponseOptions { 
     let wrapped:AnyData = <AnyData> res.body; 
     res.body = wrapped.data; 
     return res; 
    } 
} 

Answer 3

は、彼らは今、データの一部またはないとの応答をカプセル化するかどうかを選択するためのオプションをした：私はので、私はそれをもう少し汎用的にするために必要な私のIMDBから複数の種類のデータを返します。

データプロパティ/ Wもはやオブジェクトにラップ

HTTPレスポンスデータ

v0.5.0のよう（2017年10月5日）、dataEncapsulation構成 デフォルトはfalseからtrueに変更しました。 HTTP応答本体には、 の値{data：...}をカプセル化するオブジェクトではなく、データ値が直接 に格納されます。輸入配列にあなたはそれを返すようにしたい方法を選択するdataEncapsulationフラグを使用することができます

あなたapp.module.tsで

https://github.com/angular/in-memory-web-api

、：

HttpClientInMemoryWebApiModule.forRoot(
    InMemoryDataService, { delay: 0, dataEncapsulation: false } 
)