2番目の関数がobservableで実装された後、最初の関数を呼び出す方法はありますか？

Question

私は2つの機能を持っていて、save()が呼び出された後にgoBack()関数を呼び出す必要があります。

goBack(): void { 
    this.location.back(); 
    } 
    save(): void { 
    this.employeeservice.updateEmployee(this.employees) 
     .subscribe(res => this.goBack()); 
    } 

updateEmp：

updateEmployee(employee: Employee):Observable<Employee>{ 
       let headers = new Headers({'Content-Type': 'application/json'}); 
       let options = new RequestOptions({headers: headers}); 
       const url= `${this.empurl}/${employee.id}` 
       return this.http 
       .put(url,JSON.stringify(employee),{headers: headers}) 
       .map(this.extractData) 

       .catch(this.HandleErrorObservable) 
      } 

従業-details.ts：

import {Component,OnInit} from '@angular/core'; 
import {ActivatedRoute, Params} from '@angular/router'; 
import {Location} from '@angular/common'; 

import {Employee} from './employee'; 
import {EmployeeService} from './employee.service'; 





@Component ({ 
    selector: 'employee-detail', 
    templateUrl: './employee-details.html' 

}) 

export class EmployeeDetails { 
    employees : Employee; 

    constructor(
     private employeeservice : EmployeeService, 
     private route : ActivatedRoute, 
     private location : Location 
     ){} 

    ngOnInit(){ 
    this.route.params 
     .switchMap((params: Params) => this.employeeservice.getEmployee(+params['id'])) 
     .subscribe(employees => this.employees = employees); 
    } 
goBack(): void { 
    this.location.back(); 
    } 
    save(): void { 
    this.employeeservice.updateEmployee(this.employees) 
     .subscribe(res => { 
     console.log('Back from save'); 
     this.goBack(); 
    }); 
    } 

} 

従業-service.ts：

import { Injectable } from '@angular/core'; 
import { Http, Response,Headers,RequestOptions} from '@angular/http'; 
import { Observable } from 'rxjs'; 
import 'rxjs/add/operator/map'; 
import {Employee} from './employee' 

@Injectable() 
    export class EmployeeService { 
      empurl = 'api/employees'; 
      constructor (private http:Http){} 
      getDetailsFromJson():Observable<Employee[]>{ 
       return this.http.get(this.empurl) 
         .map(this.extractData) 
         .catch(this.HandleErrorObservable);       
      } 
      addEmployees(employee: Employee): Observable<Employee>{ 
       let headers = new Headers({'Content-Type': 'application/json'}); 
       let options = new RequestOptions({headers: headers}); 
       return this.http.post(this.empurl,employee,options) 
         .map(this.extractData) 
         .catch(this.HandleErrorObservable) 
      } 
      delete(id : number){ 
       console.log(id); 
    return this.http.delete(`${this.empurl}/${id}}, options`) 

    } 
      updateEmployee(employee: Employee):Observable<Employee>{ 
       let headers = new Headers({'Content-Type': 'application/json'}); 
       let options = new RequestOptions({headers: headers}); 
       const url= `${this.empurl}/${employee.id}` 
       return this.http 
       .put(url,JSON.stringify(employee),{headers: headers}) 
       .map(this.extractData) 

       .catch(this.HandleErrorObservable) 
      } 

      getEmployee(id : number){ 
       const url= `${this.empurl}/${id}` 
       return this.http.get(url) 
       .map(response => response.json().data as Employee) 
       .catch(this.HandleErrorObservable) 
      } 


      private extractData(res: Response){ 
       let body= res.json(); 
       return body.data || [] 
      } 
      private HandleErrorObservable(error : Response | any){ 
       console.log(error.message || error); 
       return Observable.throw(error.message || error); 
      } 
    } 

従業員deatils.html：

<div *ngIf="employees" > 


<div class="container" > 
    <h1>{{employees.firstname}} details!</h1> 
    <form class="form-horizontal" #employeeform="ngForm"> 
     <div class="form-group "> 
     <label for="firstname" class="control-label col-md-3">FirstName:</label> 
     <div class="col-md-6"> 
     <input type="text" class="form-control col-md-6" id="firstname" required [(ngModel)]="employees.firstname" name="firstname" > 


     </div> 
     </div> 
     <div class="form-group"> 
     <label for="lastname" class="control-label col-md-3">LastName:</label> 
     <div class="col-md-6"> 
     <input type="text" class="form-control" id="lastname" required [(ngModel)]="employees.lastname" name="lastname"> 

     </div> 
     </div> 
    <button class="btn btn-default" (click)="goBack()" >Back</button> 
     <button class="btn btn-success" (click)="save()" [disabled]="!employeeform.form.valid">Save</button> 
     </form> 
     </div> 
</div> 

約束通り、.then(() => this.goBack()); あなたはそれをどのように観測可能で呼びますか？

Answer 1

コードが正しいようです。 updateEmployeeメソッドが正常に返されるかどうかを確認します。あなたはあなたが何か書くことができます立ち往生していないことを確認するために、観察テストする場合：あなたは、コンソールログは表示されませんどちらかだから今

this.employeeservice.updateEmployee(this.employees) 
    .subscribe(res => { 
     console.log('Back from save'); 
     this.goBack(); 
    }); 

を、その場合には、あなたの観測可能と間違って何かがありますか何もしてありません歴史の以前の状態。場合

Answer 2

は、まずこの機能が働いている場合、あなたのupdateEmployee方法が

updateEmployee(employee: Employee):Observable<Employee>{ 
        let headers = new Headers({'Content-Type': 'application/json'}); 
        let options = new RequestOptions({headers: headers}); 
        const url= `${this.empurl}/${employee.id}` 
        return this.http 
        .put(url,JSON.stringify(employee),{headers: headers}) 
        .map(this.extractData) 
        .subscribe(
        data => console.log(data), 
         err => console.log(err), 
        () => console.log('working') 
         ); 
       } 

に動作していることを確認し、可能なサブスクリプションを持ついくつかの問題があるよりも、コンソールログ内のデータを参照してください。

サブスクリプションで問題が発生した場合は、コンポーネントクラスのプロバイダを削除し、モジュールレベルで追加します。

あなたの直面している問題がコンポーネントクラスを投稿するよりもまだある場合