38395


以下を参考にAngular4のHTTPについて勉強中です。  
<https://angular.io/tutorial/toh-pt6>  
サイトを参考にしてみたのですが★箇所で、ブレイクを張ってみているのですが  
herosはからとなってしまいます。  
何か設定が足りない箇所はありますでしょうか？

◆hero.component.ts

[code]

    import { Component, OnInit } from '@angular/core';
    import { HttpService } from './http.service';
    
    import { Hero } from './hero';
    
    @Component({
    ～～
    })
    
    export class HeroComponent implements OnInit {
    
    
      heros: Hero[] = [];
    
      constructor(private httpService: HttpService) { }
    
      ngOnInit(): void {
        this.httpService.get()
          .then(heroes => this.heros = heroes.slice(1, 5));★
    
      }
    }
    
[/code]

◆http.service.ts

[code]

    import { Injectable } from '@angular/core';
    import { Headers, Http } from '@angular/http';
    
    import 'rxjs/add/operator/toPromise';
    
    import { Hero } from './hero';
    
    @Injectable()
    export class HttpService {
    
      private headers = new Headers({ 'Content-Type': 'application/json' });
    
      constructor(private http: Http) { }
    
      get(): Promise<Hero[]> {
        return this.http.get('api/heroes')
          .toPromise()
          .then(response => response.json().data as Hero[])
          .catch(this.handleError);
      }
    
      private handleError(error: any): Promise<any> {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
      }
    }
    
[/code]

◆hero.ts

[code]

    export class Hero {
      id: number;
      name: string;
    }
    
[/code]

◆app.module.ts

[code]

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';
    import { HttpModule }    from '@angular/http';
    
    import { AppRoutingModule } from './app-routing.module';
    
    import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
    import { InMemoryDataService }  from './in-memory-data.service';
    
    import { AppComponent }         from './app.component';
    import { DashboardComponent }   from './dashboard.component';
    import { HeroComponent }      from './hero.component';
    import { HeroDetailComponent }  from './hero-detail.component';
    import { HeroService }          from './hero.service';
    
    @NgModule({
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        InMemoryWebApiModule.forRoot(InMemoryDataService),
        AppRoutingModule
      ],
      declarations: [
        AppComponent,
        DashboardComponent,
        HeroDetailComponent,
        HeroComponent,
      ],
      providers: [ HeroService ],
      bootstrap: [ AppComponent ]
    })
    export class AppModule { }
    
[/code]

◆in-memory-data.service.ts

[code]

    import { InMemoryDbService } from 'angular-in-memory-web-api';
    export class InMemoryDataService implements InMemoryDbService {
      createDb() {
        const heroes = [
          { id: 0,  name: 'Zero' },
          { id: 11, name: 'Mr. Nice' },
          { id: 12, name: 'Narco' },
          { id: 13, name: 'Bombasto' },
          { id: 14, name: 'Celeritas' },
          { id: 15, name: 'Magneta' },
          { id: 16, name: 'RubberMan' },
          { id: 17, name: 'Dynama' },
          { id: 18, name: 'Dr IQ' },
          { id: 19, name: 'Magma' },
          { id: 20, name: 'Tornado' }
        ];
        return {heroes};
      }
    }
    
[/code]

◆更新（10/3)  
karamarimoさまからのご指摘を受け、内容を修正しました。  
また、◎箇所が「this.http.get('api/test')」となっていたため、  
修正したところデータが取得できました。  
◆http.service.ts

[code]

      get(): Promise<Hero[]> {
        return this.http.get('api/heroes')◎
          .toPromise()
          .then(response => response.json().data as Hero[])
          .catch(this.handleError);
      }
    
[/code]

「this.http.get('XXXX')」で指定するxxxxは  
InMemoryDataService とどのように結びついているのでしょうか？


CC BY-SA 3.0
2017-10-02T12:09:27.710
38368
2017-10-03T15:32:55.460
2017-10-03T14:01:20.600
12842
12842
question
angular4
Angular4のHTTPでデータが取得できない


そのチュートリアルはだいぶ前にやったのでよく覚えてないですが、

`this.http.get('api/heroes')`は単に相対url`api/heroes`にリクエストしていますが、`app.module.ts`において`imports`内に`InMemoryWebApiModule.forRoot(InMemoryDataService)`があるのでこいつが自動的にこのリクエストに応じてくれて、`heroes`を返してくれます。

`InMemoryWebApiModule`は、本来自分でDBとCRUD
APIを設計するところを、あくまでテスト用にAPIを作ってくれるモジュールです。Googleさんがこのチュートリアルのために作ったやつなので、あくまでテスト用に使いましょう。

詳しくは[in-memory-web-api: github](https://github.com/angular/in-memory-web-
api)へ。


CC BY-SA 3.0
2017-10-03T15:32:55.460
38395
2017-10-03T15:32:55.460
20206
38368
answer