1

目前，我在 Angular 在将由各种组件使用的服务中实现 Observables 时遇到了麻烦。我遇到了一个问题，基本上是我在组件 C（选项卡样式）中有组件 A 和组件 B。组件 A 是创建一个对象，比如说轮子，组件 B 是创建一辆汽车，它使用下拉菜单从组件 A 中选择哪个轮子。我的问题是，当我创建一个轮子时，我必须刷新页面以获取新的创建的轮子出现在组件 B 的下拉列表中，这就是我尝试实现 Observables 但到目前为止我还没有成功的原因。

服务：

constructor(private http: Http) {
    this._departamentos = <BehaviorSubject<Departamento[]>>new BehaviorSubject([]);
    this.departamentos = this._departamentos.asObservable();
  }

    private url: string = 'http://localhost:8080/';
  departamentos: Observable<Departamento[]>;
  private _departamentos: BehaviorSubject<any[]>;

    // <------------------------ GET ------------------------>
    getDepartments(): Observable<Departamento[]>{
        this.departamentos = this.http.get(this.url+'selectdepartamentos')
          .map(this.extractData)
          .catch(this.handleError);
    return this.departamentos;
  }

  private extractData(response: Response) {
      let body = response.json();
      return body || {};
  }

  private handleError(error: Response) {
      console.log(error);
      return Observable.throw(error.json().error || "500 internal server error");
  }

  // <------------------------ ADD ------------------------>
  addDepartment(newDepartment){
    return this.http.post(this.url + 'departamento', newDepartment).map(
      response => this._departamentos.next(Object.assign({}, newDepartment)) );
  }

    // <------------------------ UPDATE ------------------------>
    updateDepartment(nameOldDepartment, newDepartment){
        return this.http.put(this.url+'update/'+nameOldDepartment+'/departamento', newDepartment);
    }

    // <------------------------ DELETE ------------------------>
    deleteDepartment(nameOldDepartment){
        return this.http.delete(this.url+'delete/'+nameOldDepartment);
    }

订阅组件：

this.departamentoService.getDepartments()
  .subscribe( departments => this.arregloDepartamentos = departments,
              error => this.errorMessage = <any>error);

值得一提的是，当我刷新页面时，我最初可以从我的组件 B 中获取值，但是即使我在我的 Add 方法（在服务中）上具有可观察对象上的 next 函数，当我添加任何东西时，即使对象是插入数据库。

任何帮助都非常感谢，在此先感谢。

4

2 回答 2

0

这就是我结束实现它的方式：

服务：

private departmentsSubject = new BehaviorSubject([]);
private departments: Departamento[];

// <------------------------ GET ------------------------>
getDepartments(): Observable<Departamento[]>{
    return this.departmentsSubject.asObservable();
}
private extractData(response: Response) {
  let body = response.json();
  return body || {};
}
private handleError(error: Response) {
  console.log(error);
  return Observable.throw(error.json().error || "500 internal server error");
}
loadDepartments(){
   var sub = this.http.get(this.url+'selectdepartamentos')
      .map(this.extractData)
      .catch(this.handleError);
  sub.subscribe(
     data => this.departments = data,
     err => console.log(err),
     () => this.refresh()
  );
}
private refresh() {
   this.departmentsSubject.next(this.departments);
}

组件.ts：

this.departamentoService.getDepartments().subscribe(
  departments => this.arregloDepartamentosDelete = departments
);
this.departamentoService.loadDepartments();
于 2017-11-24T19:17:17.030 回答
0

如果您希望添加的项目在添加后立即显示，您可以尝试

this.departamentoService.addDepartment(newDept).switchMap(()=>this.getDepartments())
 .subscribe( departments => this.arregloDepartamentos = departments,
          error => this.errorMessage = <any>error);
于 2017-10-25T02:10:12.623 回答