観測可能なサブスクリプション内では角度ローカルスコープは利用できません

Question

私はこれをしばらくの間苦労し、多くのソリューションを試しました。

私の購読の中で、ChangeDetectorRefまたはNgZoneにアクセスして、自分のスコープを強制的に更新することはできません。

なぜ機能しないのですか？ 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(); 
    ...