如何在第二個函數在observable中實現後調用第一個函數？

Question

我有兩個函數，我想調用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') 
         ); 
       } 

如果該功能的工作，如果你能在控制檯中看到的日誌數據有一些問題與訂閱。

如果您在訂閱時遇到問題，請移除組件類中的提供程序並添加到模塊級別。

仍然如果面對的問題比發表您的組件類