title: this.myservice.getData is not a function error give in Angular 8
body: <p>I need to fetch data from a API. I followed this tutorial in <a href="https://www.tutorialspoint.com/angular7/angular7_http_client.htm" rel="nofollow noreferrer">https://www.tutorialspoint.com/angular7/angular7_http_client.htm</a> tutorials point> I have done the project as guided by this tutorial. But this error is given in console </p>
  
  <pre><code>AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: this.myservice.getData is not a function
      at AppComponent.ngOnInit (app.component.ts:62)
      at checkAndUpdateDirectiveInline (core.js:31909)
      at checkAndUpdateNodeInline (core.js:44366)
      at checkAndUpdateNode (core.js:44305)
      at debugCheckAndUpdateNode (core.js:45327)
      at debugCheckDirectivesFn (core.js:45270)
      at Object.eval [as updateDirectives] (AppComponent_Host.ngfactory.js? [sm]:1)
      at Object.debugUpdateDirectives [as updateDirectives] (core.js:45258)
      at checkAndUpdateView (core.js:44270)
      at callWithDebugContext (core.js:45631)
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/T5IQa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T5IQa.jpg" alt="enter image description here"></a></p>
  
  <p>These are my source code</p>
  
  <p>app.module.ts </p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  
  import { GoogleChartsModule } from 'angular-google-charts';
  
  import { HttpClientModule } from '@angular/common/http';
  import {ApiService} from './api.service';
  
  import {MyserviceServiceService} from './myservice-service.service';
  
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      GoogleChartsModule,
      HttpClientModule
    ],
    providers: [ApiService,MyserviceServiceService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>myservice-service.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable({
    providedIn: 'root'
  })
  export class MyserviceServiceService {
  
    private finaldata = [];
    private apiurl = "http://jsonplaceholder.typicode.com/users";
    constructor(private http: HttpClient) { }
    getData() {
       return this.http.get(this.apiurl);
    }
  }
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import {MyserviceServiceService} from './myservice-service.service';
  
  import { Component } from '@angular/core';
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'Angular 7 Project!';
    public persondata = [];
    constructor(private myservice: MyserviceServiceService) {}
    ngOnInit() {
       this.myservice.getData().subscribe((data) =&gt; {
          this.persondata = Array.from(Object.keys(data), k=&gt;data[k]);
          console.log(this.persondata);
       });
    }
  }
  </code></pre>
  
  <p>anyone can give me the solution for the problem?</p>