title: Angular service for getting Data in API rest
body: <p>I write my first Angular App and I want to get Data from another API Rest available in local. </p>
  
  <p>My work based on Angular tuto tour-of-heroes. I use a component service for calling my API and return result in another component.
  I don't know how debug correctly in Angular. My API Rest run correctly and return data if call with my browser.</p>
  
  <p>My component datatable (which display return data API) run correctly and display HTML but not the <strong>*ngFor</strong> part (tr table for each data).</p>
  
  <p>If you have a trick for helping debug or find where is error...</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  
  @Component({
      selector: 'app-my-app',
      template: `
          &lt;h1&gt;fzfzefzfzefz&lt;/h1&gt;
          &lt;nav&gt;
          &lt;/nav&gt;
          &lt;app-my-datatable&gt;&lt;/app-my-datatable&gt;
          &lt;!--&lt;router-outlet&gt;&lt;/router-outlet&gt;--&gt;
      `,
      styleUrls: ['./app.component.css']
  })
  
  export class AppComponent {
      title = 'blablabla';
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>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 {}
  </code></pre>
  
  <p><strong>datatable.component.html</strong></p>
  
  <pre><code>&lt;h1&gt;efzefzefz&lt;/h1&gt;
  
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;Label&lt;/th&gt;
              &lt;th&gt;Cost&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr *ngFor="let operation of operations"&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>datatable.component.ts</strong></p>
  
  <pre><code>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 =&gt; this.operations = operations);
      }
      ngOnInit(): void {
          this.getOperations();
      }
  }
  </code></pre>
  
  <p><strong>operations.service.ts</strong></p>
  
  <pre><code>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&lt;Operation[]&gt;
      {
          return this.http.get(this.operationsUrl)
              .toPromise()
              .then(response =&gt; response.json().data as Operation[])
              .catch(this.handleError);
      }
  
      getOperation(id: number): Promise&lt;Operation&gt;
      {
          const url = `${this.operationsUrl}/${id}`;
          return this.http.get(url)
              .toPromise()
              .then(response =&gt; response.json().data as Operation)
              .catch(this.handleError);
      }
  
      update(operation: Operation): Promise&lt;Operation&gt;
      {
          const url = `${this.operationsUrl}/${operation.id}`;
          return this.http
              .put(url, JSON.stringify(operation), {headers: this.headers})
              .toPromise()
              .then(() =&gt; operation)
              .catch(this.handleError);
      }
  
      create(name: string): Promise&lt;Operation&gt;
      {
          return this.http
              .post(this.operationsUrl, JSON.stringify({name: name}), {headers: this.headers})
              .toPromise()
              .then(res =&gt; res.json().data as Operation)
              .catch(this.handleError);
      }
  
      delete(id: number): Promise&lt;void&gt;
      {
          const url = `${this.operationsUrl}/${id}`;
          return this.http.delete(url, {headers: this.headers})
              .toPromise()
              .then(() =&gt; null)
              .catch(this.handleError);
      }
  
      private handleError(error: any): Promise&lt;any&gt; {
          console.error('An error occurred', error); // for demo purposes only
          return Promise.reject(error.message || error);
      }
  }
  </code></pre>
  
  <p>thanks for help.</p>