Question

我有两个函数，我希望在调用goBack()后调用save()函数。

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

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

}

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

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

Your code seems correct. Check if the updateEmployee method returns successfully. If you just want to test observable to make sure it's not stuck you can write something like:

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

So now either you won't see your console log in which case there's something wrong with your observable or there's nothing in the previous state of the history.

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

如果此功能正常工作，并且您能够在控制台日志中查看数据，那么订阅时会出现一些问题。

如果您遇到订阅问题，请在组件类中删除提供程序并添加模块级别。

如果您面临的问题仍然是发布您的组件类

如何在observable中实现第二个函数后调用第一个函数？

2 个答案: