Angular2 http subscribe component

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은 간단하다 : 나는 HTTP에 관찰자를 등록, 내가 성공은 서버에 API를 보내고 응답을 받았습니다 수

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

:

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

} 

이 내 HTML입니다 응답은 Observable 객체이며 내부 함수 인 I console.log()successMessage이 있는데 'undefined'가 있는데 successMessage을 변경하면 내 HTML에 아무런 변화가 없습니다. 내 구성 요소의 범위를 잃은 것처럼

당신이 TypeScript 내부의 function 키워드를 사용하기 때문에 그때의 키워드

Answer 1

을 사용할 수 없습니다 것 같다. 절대하지 마. 항상 화살표 표기 () => {}을 사용하십시오. ... 난 정말 그것에 대해 감사 태권도 연맹

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