title: Can't display data coming from service method into component
body: <p>Still working on my Angular 5 - PHP project.</p>
  
  <p>I want to put all my http methods inside a single file called api, and call any method I want by just importing it into the desired component. I don't know if it's good to work like that or not.</p>
  
  <p>Anyway, here is my <code>service</code> called <code>api.ts</code>:</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import { Http, Response } from '@angular/http';
  
  @Injectable()
  export class Api{
      public data: any = [];
      constructor(private http: Http){ }
  
      getPartnersName(){
          this.http.get('http://aff.local/getPartners.php').subscribe(
          (response: Response) =&gt;{
            this.data = response.json();
            console.log(this.data);
            //this.keys.push(this.data);
          },
          error =&gt;{
            console.log(error);
          }
        )
      }
  }
  </code></pre>
  
  <p>And I imported it in <code>app.module.ts</code>:</p>
  
  <pre><code>...//imports
  ...//Other imports
  import { Api } from '../api/api';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      ReactiveFormsModule,
      HttpModule
    ],
    providers: [Api],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>And then I injected it in my component:</p>
  
  <pre><code>constructor(private fb: FormBuilder, private api: Api){
  
  }
  </code></pre>
  
  <p>Which is here <code>api: Api</code>.</p>
  
  <p>Now, I called the method that I want to use inside <code>ngOnInit()</code>:</p>
  
  <pre><code>ngOnInit(){
      this.api.getPartnersName();
  }
  </code></pre>
  
  <p>The problem is that is I am seeing the data at the console properly:</p>
  
  <p><a href="https://i.stack.imgur.com/vY7qC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vY7qC.png" alt="enter image description here"></a></p>
  
  <p>But can't display them on screen:</p>
  
  <pre><code>&lt;div class="row center-block"&gt;
      &lt;div class="col-sm-4" *ngFor="let datas of data;"&gt;
        {{datas.partner_name}}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>