Angular2：发送API调用后更新UI

我正在用Angular（2）构建一个UI，我需要project details视图来调用API，以便在用户每次与UI交互时获取项目的最新数据。 即，当删除任务或将任务标记为已完成项目时（使用API调用），应再次调用项目端点以获取最新数据

我以为我用下面的代码破解了它，但实际上按时间顺序发生的是：

进行了获取项目调用的选项调用

项目的GET调用已发出

删除调用是针对一个任务进行的

这意味着项目在更改之前再次加载，而项目在更改之后加载

这是我的project-detail.component.ts的代码：

public getProject(): void {
    this.route.params
    .switchMap((params: Params) => this.projectService.getProject(+params['id']))
    .subscribe(project => this.project = project);

}    

public deleteTask(task): void {
    this.projectService
        .deleteTask(task, this.project)
        .subscribe(
            this.getProject()
        );
}

这是project.service.ts的代码：

public getProject(id: number): Promise<Project> {
    const url = `${this.projectsURL}/${id}`;

    return this.http.get(url)
              .toPromise()
              .then(response => response.json() as Project)
              .catch(this.handleError);
}

public deleteTask(task: Task, project: Project): any {
    const url = `${this.projectsURL}/${project.id}/tasks/${task.id}`;

    return this.http.delete(url)
        .toPromise()
        .then(() => task)
        .catch(this.handleError);

  }

publicGetProject（id:number）：承诺{
constURL=`${this.projectsURL}/${id}`；
返回此.http.get（url）
.toPromise（）
.then（response=>response.json（）作为项目）
.接住（这个.把手错误）；
}
公共删除任务（任务：任务，项目：项目）：任意{
常量url=`${this.projectsURL}/${project.id}/tasks/${task.id}`；
返回此.http.delete（url）
.toPromise（）
.然后（（）=>任务）
.接住（这个.把手错误）；
}

在

项目详细信息.component.ts

中，您应该使用

然后

而不是

订阅

，因为您返回的是

承诺

而不是

可观察的

public deleteTask(task): void {
    this.projectService
        .deleteTask(task, this.project)
        .then(() => this.getProject());
}

---

我会利用FlatMap操作符：

someMethod（）{
让obs=this.deleteTask（task）.subscribe（project=>this.project=project）；
}
public getProject（）：void{
这个.route.params
.switchMap（（params:params）=>this.projectService.getProject（+params['id']））
}
公共删除任务（任务）：无效{
这是projectService
.deleteTask（任务，此.project）
.flatMap（（）=>{
返回此.getProject（）；
}
);
}

请添加

项目服务的代码

谢谢，完成@Dhyythanks，我试过这个，但是我仍然有一个问题，GET调用（步骤2）发生在DELETE调用（步骤3）之前，这似乎对我不起作用。我只需要进行调用，以便它更新类变量，而不返回任何内容。