title: ERROR Error: Uncaught (in promise): TypeError: users is undefined
body: <p>I have an error in this Component and that error is not caught by command prompt.</p>
  
  <p>Dashboard.component.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  
  import { User } from './user.component';
  import { UserService } from './user.service';
  
  
  @Component({
    selector : 'dashboard',
    templateUrl : './views/dashboard-component.html',
    styleUrls: ['./views/css/dashboard-component.css'],
    providers: [UserService]
  })
  
  export class DashboardComponent {
    users: User[] = [];
  
    constructor(private userservice: UserService){}
  
    ngOnInit() : void{
      this.userservice.getusers().then(users =&gt; this.users = users.slice(1,5) );
    }
  }</code></pre>
  </div>
  </div>
  
  I can't understand what the problem is because i have defined "users" in the class.
  The method is called from this service.</p>
  
  <p>user.service.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { User } from './user.component';
  import { USERS } from './mock-users';
  import { Headers, Http } from '@angular/http';
  
  import 'rxjs/add/operator/toPromise';
  
  
  
  @Injectable()
  export class UserService {
  
    private usersUrl = "http://localhost/user/src/app/userlist.php";
  
    constructor(private http: Http) { }
  
    getusers() : Promise&lt;User[]&gt;{
      
      return this.http.get(this.usersUrl)
                  .toPromise()
                  .then(response =&gt; response.json().data as User[])
                  .catch(this.handleError);
    }
    getuser(id: number): Promise&lt;User&gt; {
      const url = '${this.usersUrl}/${id}';
    return this.http.get(url)
                .toPromise()
                .then(response =&gt; response.json().data as User)
                .catch(this.handleError);
  }
  private handleError(error : any): Promise&lt;any&gt; {
    console.error('an error occured', error);
    return Promise.reject(error.message || error);
  }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The data I am getting is : </p>
  
  <pre><code>[{"id":"1","fname":"Vishwas","lname":"Jadav","email":"vjadav@live.com","dpic":"2017-10-7--09-12-19.jpeg","phone":"7621823474","passw":"illj123","type":"2"}]
  </code></pre>