Angular2 composant de souscription http

Question

Une application angular2, essayez d'enregistrer un e-mail.

import {Component, Directive, provide, Host} from '@angular/core'; 
import {NG_VALIDATORS, NgForm} from '@angular/forms'; 
import {ChangeDetectorRef, ChangeDetectionStrategy} from '@angular/core'; 
import {ApiService} from '../../services/api.service'; 

import {actions} from '../../common/actions'; 
import {EmailValidator} from '../../directives/email-validater.directive'; 
import * as _ from 'lodash'; 
import * as Rx from 'rxjs'; 

@Component({ 
    selector: 'register-step1', 
    directives: [EmailValidator], 
    styleUrls: ['app/components/register-step1/register.step1.css'], 
    templateUrl: 'app/components/register-step1/register.step1.html' 
}) 
export class RegisterStep1 { 

    email: string; 
    userType: number; 
    errorMessage: string; 
    successMessage: string; 

    constructor(private _api: ApiService, private ref: ChangeDetectorRef) { 
    this.successMessage = 'success'; 
    this.errorMessage = 'error'; 

    } 

    submit() { 

     var params = { 
      email: this.email, 
      type: +this.userType 
     }; 
     params = { 
      email: '1@qq.com', 
      type: 3 
     }; 

     this._api.query(actions.register_email, params).subscribe({ 
      next: function(data) { 
       if(data.status) { 
        console.log("success register"); 
        this.successMessage = "ok ,success"; 
        console.log(this.errorMessage, this.successMessage);  
       }else{ 
        this.errorMessage = data.message; 
        console.warn(data.message) 
       } 
      }, 
      error: err => console.log(err), 
      complete:() => console.log('done') 
     }); 
    } 
} 

mon ApiService est simple:

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

import {AjaxCreationMethod, AjaxObservable} from 'rxjs/observable/dom/AjaxObservable'; 

import {logError} from '../services/log.service'; 
import {AuthHttp, AuthConfig, AUTH_PROVIDERS} from 'angular2-jwt'; 

@Injectable() 
export class ApiService { 
    _jwt_token:string; 

    constructor(private http:Http) { 

    } 


    toParams(paramObj) { 
     let arr = []; 
     for(var key in paramObj) { 
      arr.push(key + '=' + paramObj[key]); 
     } 
     return arr.join('&') 
    } 

    query(url:string, paramObj:any) { 
     let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}); 
     let options = new RequestOptions({headers: headers}); 

     return this.http.post(url, this.toParams(paramObj), options).map(res=>res.json()) 
    } 

} 

ceci est mon html:

<form #f="ngForm"> 
usertype<input type="text" name="userType" [(ngModel)]="userType"><br/> 
    <input type="text" name="email" ngControl="email" email-input required [(ngModel)]="email"> 
    <button [disabled]="!f.form.valid" (click)="submit(f.email, f.userType)">add</button> 

</form> 
{{f.form.errors}} 
<span *ngIf="errorMessage">error message: {{errorMessage}}</span> 
<span *ngIf="successMessage">success message: {{successMessage}}</span> 

Je peux le succès envoyer le api au serveur et la réponse reçue, je souscris un observateur à http réponse qui est un objet Observable, à l'intérieur de la fonction suivante, je console.log() mon successMessage, mais je suis 'indéfini', et quand je change le successMessage mon html n'a pas de changement.

Il semble que j'ai perdu la portée de mon élément, je ne peux pas utiliser ce mot-clé

Answer 1

C'est parce que vous utilisez le mot-clé à l'intérieur functionTypeScript. Ne fais jamais ça. Utilisez toujours la notation de la flèche () => {}.

Vous devez changer votre fonction next à:

next: (data) => { 
    if(data.status) { 
     console.log("success register"); 
     this.successMessage = "ok ,success"; 
     console.log(this.errorMessage, this.successMessage);  
    }else{ 
     this.errorMessage = data.message; 
     console.warn(data.message) 
    }