API残りのデータを取得する角度サービス

Question

私は最初の角型アプリケーションを作成し、別のAPIからデータを取得したい。

私の作品はAngular tuto tour-of-heroesに基づいています。私は、私のAPIを呼び出し、結果を別のコンポーネントに返すためのコンポーネントサービスを使用します。 Angularのデバッグ方法が正しく分かりません。 My APIブラウザを使用して通話すると、正常に動作し、データが返されます。

返品データAPIを表示するコンポーネントは正しく実行され、HTMLは表示されますが、* ngの場合は部分（各データのtrテーブル）では表示されません。

デバッグを支援したり、エラーがどこにあるかを見つけるためのトリックを持っている場合は...

app.component.ts

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'app-my-app', 
    template: ` 
     <h1>fzfzefzfzefz</h1> 
     <nav> 
     </nav> 
     <app-my-datatable></app-my-datatable> 
     <!--<router-outlet></router-outlet>--> 
    `, 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    title = 'blablabla'; 
} 

app.module.ts

import { BrowserModule }  from '@angular/platform-browser'; 
import { NgModule }   from '@angular/core'; 
import { FormsModule }  from '@angular/forms'; 
import {Router, RouterModule} from '@angular/router'; 

import { AppComponent }  from './app.component'; 
import { DatatableComponent } from './datatable.component'; 
import { OperationService } from './operation.service'; 

import { AppRoutingModule } from './app-routing.module'; 
import { HttpModule }   from '@angular/http'; 

@NgModule({ 
    declarations: [AppComponent, DatatableComponent], 
    imports:  [ 
     BrowserModule, 
     FormsModule, 
     AppRoutingModule, 
     HttpModule, 
     RouterModule.forRoot([{path: 'datatable', component: DatatableComponent}]) 
    ], 
    providers: [ 
     OperationService 
    ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { } 

app-routing.module.ts

import { NgModule }    from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import {DatatableComponent}  from './datatable.component'; 

const routes: Routes = [ 
    { path: '', redirectTo: '/datatable', pathMatch: 'full' }, 
    { path: 'datatable', component: DatatableComponent }, 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ] 
}) 

export class AppRoutingModule {} 

datatable.component.html

<h1>efzefzefz</h1> 

<table> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Label</th> 
      <th>Cost</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let operation of operations"> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
     </tr> 
    </tbody> 
</table> 

datatable.component.ts

import { Component, OnInit } from '@angular/core'; 

import { Operation }   from './operation'; 
import { OperationService } from './operation.service'; 

@Component({ 
    selector: 'app-my-datatable', 
    templateUrl: './datatable.component.html', 
    styleUrls: ['./datatable.component.css'] 
}) 

export class DatatableComponent implements OnInit{ 

    title = 'app toto'; 

    operations: Operation[]; 

    constructor(private operationService: OperationService) { } 

    getOperations(): void { 
     this.operationService.getOperations().then(operations => this.operations = operations); 
    } 
    ngOnInit(): void { 
     this.getOperations(); 
    } 
} 

operations.service.ts

import { Injectable }  from '@angular/core'; 
import { Headers, Http } from '@angular/http'; 

import { Operation }  from './operation'; 

import 'rxjs/add/operator/toPromise'; 

@Injectable() 

export class OperationService 
{ 
    private headers = new Headers({'Content-Type': 'application/json'}); 
    private operationsUrl = 'http://60.60.60.100/api/operations'; 

    constructor(private http: Http) { } 

    getOperations(): Promise<Operation[]> 
    { 
     return this.http.get(this.operationsUrl) 
      .toPromise() 
      .then(response => response.json().data as Operation[]) 
      .catch(this.handleError); 
    } 

    getOperation(id: number): Promise<Operation> 
    { 
     const url = `${this.operationsUrl}/${id}`; 
     return this.http.get(url) 
      .toPromise() 
      .then(response => response.json().data as Operation) 
      .catch(this.handleError); 
    } 

    update(operation: Operation): Promise<Operation> 
    { 
     const url = `${this.operationsUrl}/${operation.id}`; 
     return this.http 
      .put(url, JSON.stringify(operation), {headers: this.headers}) 
      .toPromise() 
      .then(() => operation) 
      .catch(this.handleError); 
    } 

    create(name: string): Promise<Operation> 
    { 
     return this.http 
      .post(this.operationsUrl, JSON.stringify({name: name}), {headers: this.headers}) 
      .toPromise() 
      .then(res => res.json().data as Operation) 
      .catch(this.handleError); 
    } 

    delete(id: number): Promise<void> 
    { 
     const url = `${this.operationsUrl}/${id}`; 
     return this.http.delete(url, {headers: this.headers}) 
      .toPromise() 
      .then(() => null) 
      .catch(this.handleError); 
    } 

    private handleError(error: any): Promise<any> { 
     console.error('An error occurred', error); // for demo purposes only 
     return Promise.reject(error.message || error); 
    } 
} 

ありがとうございました。

Answer 1

.json()メソッドはレスポンス本体を消費するため、APIから返されない限りdataを呼び出す必要はありません。

res.json().data as Operationをres.json() as Operation[]に切り替える必要があります。