Angular2 http subscribeコンポーネント

Question

angular2アプリでは、電子メールを登録しようとします。

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') 
     }); 
    } 
} 

私ApiService簡単です：これは私のhtmlです

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()) 
    } 

} 

：

<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> 

私は成功のサーバーへのAPIを送信することができますし、応答を受信し、私は、httpにオブザーバーをサブスクライブ応答はObservableオブジェクトで、次の関数の内部ではconsole.log()私のsuccessMessageですが、私は '未定義'となりました。successMessageを変更すると、私のHTMLに変更はありません。私は私のコンポーネントのスコープを失っているよう

あなたがTypeScript内functionキーワードを使用しているため、その後、私はだ、このキーワード

Answer 1

を使用することはできません、と思われます。決してこれをしないでください。必ず矢印の表記() => {}を使用してください。

あなたはあなたに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) 
    }