角度本地範圍不可用於可觀察訂閱

Question

我一直在苦苦掙扎，並嘗試了很多解決方案。

在我的訂閱內我不能訪問ChangeDetectorRef或NgZone強制更新我的範圍。

爲什麼沒有任何工作？有沒有其他的Angular知道做HTTP請求的方式？

登錄組件

import {ChangeDetectionStrategy, ChangeDetectorRef, Component, NgZone, OnInit} from '@angular/core'; 
import {LoginService} from './login.service'; 
import {Observable} from 'rxjs/Observable'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'], 
    providers: [LoginService] 
}) 
export class LoginComponent implements OnInit { 
    zone: NgZone; 
    username = ''; 
    password = ''; 
    showerror = false; 
    errormsg = ''; 
    rs = {}; 
    results: any; 


    constructor(private _loginService: LoginService, private ref: ChangeDetectorRef) { 

    } 

    refr = function() { 
     console.log('refresh'); 
     console.log(this.errormsg); // is empty even after HTTP call 
     this.ref.markForCheck(); 
     console.log(this.results); 
    }; 

    login = function() { 
     console.log(this.username, this.password); 

     this._loginService.login(this.username, this.password).subscribe(function (data) { 

      console.log('log me in'); 
      console.log(data); // the correct data is logged here 
      this.errormsg = 'Invalid Username and Password'; // the text is never updated 
      this.zone.run(); // zone has no method run 
      this.ref.markForCheck(); // ref has no method markForCheck 
     }); 

     // this.results = this._loginService.login(this.username, this.password); 
     // this.results.subscribe(rs => this.rs = rs); 
    }; 

    ngOnInit() { 

    } 

} 

登錄服務

import {Injectable} from '@angular/core'; 
import {CONFIG} from '../config'; 
import {Http, Response} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 

const loginUrl: string = CONFIG.apiserv + 'api.login.php'; 

@Injectable() 
export class LoginService { 
    private http; 
    constructor(http: Http) { 
     this.http = http; 
    } 

    login = function (username, password): Observable<Response> { 
     console.log('login clicked'); 
     let url = new URLSearchParams(); 
     url.append('username', username); 
     url.append('password', password); 
     const fullurl = loginUrl + '?' + url.toString(); 

     return this.http.get(fullurl) 
      .map((response: Response) => response.json()) 
      .do(data => console.log('All: ' + JSON.stringify(data))) 
      .catch(this.handleError); 
    }; 
    handleError = function (error: Response) { 
     console.log(error); 
     return Observable.throw(error.json().error || 'Server error'); 
    }; 
} 

Answer 1

，因爲你正在使用this，你應該使用arrow function：

this._loginService.login(this.username, this.password).subscribe(data => { 

     console.log('log me in'); 
     console.log(data); // the correct data is logged here 
     this.errormsg = 'Invalid Username and Password'; // the text is never updated 
     this.zone.run(); 
     this.ref.markForCheck(); 
    }); 

Answer 2

如果要將this綁定到新創建的示波器，則需要使用=>。

this._loginService.login(this.username, this.password).subscribe(data => { 

參見：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

否則，你可以指定this給一個變量，但如果你使用的打字稿或ES6是沒有必要的。

var that = this; 
this._loginService.login(this.username, this.password).subscribe(function (data) { 
    that.zone.run(); 
    ...