如何在更新数据库（angular2）之前从服务中检索数据？

这是我的问题

我有一个组件，用户可以在其中单击喜爱的按钮。该操作将存储在数据库中，并将更新“收藏夹”列的值。关键是，为了更新该值，我从数据库中获取它，我这样做： -我在组件构造函数中执行get服务，以检索特定帖子的所有数据（名称、描述、用户、收藏夹…）。 -我将收藏夹列中的值赋给一个变量。 -当我单击favorite按钮时，我将一个添加到该变量（变量+1），并将其发送到web服务

数据库中的数据已正确更新，但如果我再次按下“收藏”按钮，相同的值将插入数据库中，因为angular不会刷新我从服务中获取的数据。它更新组件中数据的唯一方法是页面刷新，但这不是我想要的

这是我的密码：

服务.ts

updateFav (id: any, variable: any): Observable<any> {
    return this.http.put(`${this.baseUrl}updatePublicacion/${id}/`, variable, {headers: this.getHeaders()})
                     .map((res:Response) => res.json())
                     .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}  

@Component({
  selector: 'publicacion-individual',
  providers: [CynomysService],
  templateUrl: './publicacion-individual.component.html',
  styleUrls: ['publicacion-individual.component.css']
})
export class PublicacionindividualComponent implements OnInit {

    idRecibido: any;
    publicacionRecibida: Publicacion;
    favoritos: any;
    favToAdd: any;
    response: any;
    errorMessage: any;

    constructor (private cynomysService: CynomysService, private route:  ActivatedRoute, private _router: Router ){
        this.cynomysService.getPublicacionById(this.route.snapshot.params['id']).subscribe((p) => {this.publicacionRecibida = p});
    }

    ngOnInit() {

    }

    addFavorite() {
        this.favoritos = this.publicacionRecibida[0].favoritos;
        this.idRecibido = this.publicacionRecibida[0].idPublicaciones;
        this.cynomysService.updateFav(this.idRecibido, (this.favoritos + 1)).subscribe(
            result => this.response = result,
            error => this.errorMessage = <any>error
            );
    }


}

updateFav（id:any，variable:any）：可观察{
返回this.http.put（`${this.baseUrl}updatePublication/${id}/`，变量，{headers:this.getHeaders（）}）
.map（（res:Response）=>res.json（））
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
}  

组件。ts

updateFav (id: any, variable: any): Observable<any> {
    return this.http.put(`${this.baseUrl}updatePublicacion/${id}/`, variable, {headers: this.getHeaders()})
                     .map((res:Response) => res.json())
                     .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}  

@Component({
  selector: 'publicacion-individual',
  providers: [CynomysService],
  templateUrl: './publicacion-individual.component.html',
  styleUrls: ['publicacion-individual.component.css']
})
export class PublicacionindividualComponent implements OnInit {

    idRecibido: any;
    publicacionRecibida: Publicacion;
    favoritos: any;
    favToAdd: any;
    response: any;
    errorMessage: any;

    constructor (private cynomysService: CynomysService, private route:  ActivatedRoute, private _router: Router ){
        this.cynomysService.getPublicacionById(this.route.snapshot.params['id']).subscribe((p) => {this.publicacionRecibida = p});
    }

    ngOnInit() {

    }

    addFavorite() {
        this.favoritos = this.publicacionRecibida[0].favoritos;
        this.idRecibido = this.publicacionRecibida[0].idPublicaciones;
        this.cynomysService.updateFav(this.idRecibido, (this.favoritos + 1)).subscribe(
            result => this.response = result,
            error => this.errorMessage = <any>error
            );
    }


}

@组件({
选择器：“publicacion个人”，
提供者：[食蟹座服务]，
templateUrl:'./publicacion individual.component.html'，
样式URL:['publicacion-individual.component.css']
})
导出类PublicacionindividualComponent实现OnInit{
伊德里比多：任何；
publicacionRecibida:Publicacion；
偏爱：任何；
favToAdd：任何；
答复：任何；
错误消息：任何；
构造函数（私有的CynomyService:CynomyService，私有路由：ActivatedRoute，私有的路由器：路由器）{
this.cynomysService.getPublicacionById（this.route.snapshot.params['id']）.subscribe（（p）=>{this.publicacionRecibida=p}）；
}
恩戈尼尼特（）{
}
addFavorite（）{
this.favoritos=this.publicationRecibida[0].favoritos；
this.idRecibido=this.publicationRecibida[0].idPublicaciones；
this.cynomysService.updateFav（this.idRecibido，（this.favoritos+1））.subscribe(
result=>this.response=result，
error=>this.errorMessage=错误
);
}
}

我想我需要做些什么，但我真的不知道该做什么，因为我是新来的

---

我尽量说清楚，但问我是否从我的解释中理解了一些内容。

看起来像是您的

此。publicacionRecibida在更新后不会更新

如果您可以控制服务器端，那么最好让它在您的
更新
服务中返回。如果没有，您必须在更新后再次调用
this.cynomysService.getPublicacionById
：

this.cynomysService.updateFav(this.idRecibido, (this.favoritos + 1))
  .flatMap(
    result => {
      this.response = result;
      //call the get again to refresh your data;
      return this.cynomysService.getPublicacionById(this.route.snapshot.params['id']);
    })
  //final processing
  .subscribe(
    result => {}, 
    error => this.errorMessage = <any>error,
    ()=>{});

this.cynomysService.updateFav（this.idRecibido，（this.favoritos+1））
.平面图(
结果=>{
这个。反应=结果；
//再次调用get刷新数据；
返回此.cynomysService.getPublicacionById（this.route.snapshot.params['id']）；
})
//最终加工
.订阅(
结果=>{}，
error=>this.errorMessage=错误，
()=>{});
更新数据库后，只需拨打get请求即可获取所有收藏夹？谢谢您的快速回复。我在我的组件中使用了代码，但它给了我这个错误：类型为“（result:any）=>void”的参数不可分配给类型为“（value:any，index:number）=>ObservableInput”的参数。类型“void”不可分配给类型“ObservableInput”。已更新。没有正确读取代码。您可以使用
flatMap
来链接观测值。再次感谢您的时间。现在它给了我这个错误：类型为“（final:any）=>void”的参数不能赋值给类型为“（）=>void”的参数。我试图摆脱“final=>{}部分，但当执行该方法时，它抛出=>this.cynomysService.updateFav（…）.flatMap不是PublicacionindividualComponent.webpackJsonp.98.PublicacionindividualComponent.addFavorite的函数，我不确定它是否在没有final=>{}的情况下抛出该错误不管怎样，只需删除最后一个函数中的
final
。它不需要任何参数，几乎可以正常工作（我必须在服务中添加import'rxjs/add/operator/mergeMap'）。它正在更新数据库中的数据，但由于我将使用get方法检索的所有数据存储在变量publicacionRecibida:Publicacion中；我需要在此处订阅//再次调用get以刷新数据；返回此.cynomysService.getPublicacionById（this.route.snapshot.params['id'））；如果我像在构造函数中那样订阅，我会在返回中得到一个错误。对于所有的麻烦，我深表歉意！