Angular2，呼叫服務功能，無法讀取未定義的屬性'***'

Question

我打電話給一個服務的功能，但我總是得到Cannot read property 'getCurrentUser' of undefined。

這是我的服務，authentication.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class AuthenticationService { 
    public token: string; 
    private url = 'http://192.168.201.211:8024/api-token-auth/'; 
    private options: RequestOptions; 
    private currentUser: any; 

    constructor(private http: Http) { 
    // set token if saved in local storage 
    this.currentUser = JSON.parse(localStorage.getItem('currentUser')); 
    this.token = this.currentUser && this.currentUser.token; 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    this.options = new RequestOptions({ headers: headers }); 
    } 

    login(username: string, password: string): Observable<boolean> { 
    return this.http.post(this.url, JSON.stringify({ username: username, password: password }), this.options) 
     .map((response: Response) => { 
      // login successful if there's a jwt token in the response 
      let token = response.json() && response.json().token; 
      if (token) { 
       // set token property 
       this.token = token; 

       // store username and jwt token in local storage to keep user logged in between page refreshes 
       localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token })); 

       // return true to indicate successful login 
       return true; 
      } else { 
       // return false to indicate failed login 
       return false; 
      } 
     }); 
    } 

    logout(): void { 
    // clear token remove user from local storage to log user out 
    this.token = null; 
    localStorage.removeItem('currentUser'); 
    } 

    getCurrentUser(): Observable<any> { 
    console.log('i am in getCurrentUser'); 
    this.currentUser = JSON.parse(localStorage.getItem('currentUser')); 
    return this.currentUser; 
    } 
} 

然後，我打電話getCurrentUser從另一個組件user-detail.component.ts：

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

import 'rxjs/add/operator/switchMap'; 
import { User } from '../user'; 
import { AuthenticationService } from '../authentication.service'; 

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

export class UserDetailComponent implements OnInit { 
    @Input() user: User; // current page belonger 
    loginUser: any; // current login user 
    canEdit: boolean = false; 
    constructor(
    private authService: AuthenticationService, 
) { 
    } 

    ngOnInit() { 

    // always watch out login user 
    setInterval(this.checkUserMatch, 5000); 
    } 


    // check if current login user can edit this page 
    checkUserMatch() { 
    this.loginUser = this.authService.getCurrentUser(); 
    if (this.loginUser) { 
     if (this.user.username === this.loginUser.username) { 
     this.canEdit = true; 
     } 
     else { 
     this.canEdit = false; 
     } 
    } 
    else { 
     this.canEdit = false; 
    } 
    console.log(this.canEdit); 
    } 
} 

Answer 1

當你通過一個參考setInterval這樣的內部checkUserMatchthis變化背景setInterval(this.checkUserMatch, 5000);。

使用arrow function來包裝該功能。這將設置正確的this內checkUserMatch``：

setInterval(() => this.checkUserMatch(), 5000); 

或者使用Function.bind：

setInterval(this.checkUserMatch.bind(this), 5000); 

見red flags for this.