Angular 2 Http Beitrag sendet zwei Ajax-Aufrufe statt einer

Question

Hallo ich meinen Kopf versuche um die beobachtbaren Muster zu wickeln Implementierung von Winkel- und ich scheinen eine Art von issues.Here zu haben ist mein Code:

import 'rxjs/Rx'; 
import {Injectable, EventEmitter} from 'angular2/core'; 
import {Http, Response, RequestOptions, Headers, URLSearchParams} from 'angular2/http'; 
import {Observable} from 'rxjs/Observable' 
import {GuidService} from './guid.service'; 

@Injectable() 
export class HttpService { 
    private http: Http; 
    private guidService: GuidService; 
    public ajaxStarted: EventEmitter<string> = new EventEmitter(); 
    public ajaxCompleted: EventEmitter<string> = new EventEmitter(); 

    constructor(http: Http, guidService: GuidService) { 
     this.http = http; 
     this.guidService = guidService; 
    } 

    public post(url: string, model: any): Observable<Response> { 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     //Create unique id for each ajax call 
     let httpCallId = this.guidService.new(); 

     //Let Loading Box components that an ajax call has been triggered 
     this.ajaxStarted.emit(httpCallId); 

     let httpPost = this.http.post(url, JSON.stringify(model), options); 

     //Let Loadinc Box Component know that ajax call has been completed 
     httpPost.subscribe(success => this.ajaxCompleted.emit(httpCallId), error => this.ajaxCompleted.emit(httpCallId)); 

     return httpPost; 
    } 

} 

Und dies ist mein Code, der auf Formular aufgerufen wird, einreichen:

@Component({ 
    selector: 'register', 
    templateUrl: './app/account/components/register.view.html', 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class RegisterComponent { 
    private accountDataService: AccountDataService 

    public registerViewModel: AccountViewModel.UserRegistrationViewModel; 

    constructor(accountDataService: AccountDataService) { 
     this.accountDataService = accountDataService; 
     this.registerViewModel = <AccountViewModel.UserRegistrationViewModel>{}; 
    } 

    public register() { 
     this.accountDataService.register(this.registerViewModel).subscribe(x => { 
      console.log(x); 
     }) 
    } 
}  

<form (ngSubmit)="register()" #userRegistrationForm="ngForm"> 
      <div class="form-group"> 
       <input class="form-control" 
         type="email" 
         placeholder="Email Address" 
         [(ngModel)]="registerViewModel.userName" /> 
      </div> 
      <div class="form-group"> 
       <input class="form-control" 
         type="password" 
         placeholder="Password" 
         [(ngModel)]="registerViewModel.password" /> 
      </div> 
      <div class="form-group"> 
       <input class="form-control" 
         type="password" 
         placeholder="Password Confirmation" 
         [(ngModel)]="registerViewModel.confirmPassword" /> 
      </div> 
      <div class="form-group"> 
       <button type="submit" 
         class="btn btn-fluid btn-primary" 
         [disabled]="!userRegistrationForm.form.valid">Register</button> 
      </div> 
     </form> 

Nun mein Problem ist, dass, wenn ich den Absenden-Button klicken statt einer ajax-Aufrufe dies auf die server.I geprüft haben, indem sie zu geschickt bekommen ein brainpoint auf dem Server und zwei Anrufe an.

Die Registerfunktion wird nur aufgerufen, wenn auf die Schaltfläche geklickt wird.

Ich habe bemerkt, dass mein Problem ist diese Linie:

httpPost.subscribe(success => this.ajaxCompleted.emit(httpCallId), error => this.ajaxCompleted.emit(httpCallId)); 

Wenn ich es nur ein Ajax-Aufruf Kommentar wird an den Server gesendet.

Die Art, wie ich Observables verstehe, ist, dass jede Subskription ausgelöst wird, wenn sich der beobachtbare Wert ändert.

Was mache ich hier falsch?

UPDATE:

Das Problem repliziert offenbar auch in den get Anrufe. Alle get Anrufe in meiner app Anruf ths Funktion:

public get(url: string, model: any = {}): Observable<Response> { 
    let httpCallId = this.guidService.new(); 

    this.ajaxStarted.emit(httpCallId); 

    let httpGet = this.http.get(url, new RequestOptions({ 
     headers: this.getHttpHeaders(), 
     search: this.createURLSearchParams(model) 
    })); 

    httpGet.subscribe(success => this.ajaxCompleted.emit(httpCallId), error => this.ajaxCompleted.emit(httpCallId)); 

    return httpGet; 
} 

Answer 1

Ich denke, dass Sie doppelt auf Ihre POST beobachtbaren abonnieren, weil Sie einmal post Methode des HttpService im abonnieren und sie zurückbringen. Sie abonnieren wahrscheinlich wieder auf das in einem anderen Teil Ihrer Anwendung beobachtbaren zurückgegeben:

public post(url: string, model: any): Observable<Response> { 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    //Create unique id for each ajax call 
    let httpCallId = this.guidService.new(); 

    //Let Loading Box components that an ajax call has been triggered 
    this.ajaxStarted.emit(httpCallId); 

    let httpPost = this.http.post(url, JSON.stringify(model), options); 

    //Let Loadinc Box Component know that ajax call has been completed 
    httpPost.subscribe(success => { // <------- 
     this.ajaxCompleted.emit(httpCallId); 
    }, error => { 
     this.ajaxCompleted.emit(httpCallId); 
    }); 

    return httpPost; 
} 

Da Observablen sind kalt standardmäßig wird die entsprechende Anforderung zweimal ausgeführt werden (wenn zweimal gezeichnet).