Angular2：API呼び出しを送信した後にUIを更新する

Question

私はAngular（2）でUIを作成しています。ユーザーが対話するたびにプロジェクトの最新データを取得するためにAPIを呼び出すにはプロジェクトの詳細ビューが必要ですUI。 I.タスクを削除するか、（API呼び出しを使用して）プロジェクトのためにタスクをマークした場合、プロジェクトのエンドポイントを再度呼び出して最新のデータを取得する必要があります。

私は以下のコードでそれを割ったと思ったが、何実際に年代順に起こることです：

1. GETプロジェクトの呼び出しが行われるためのオプションが呼び出します。
2. プロジェクトのGET呼び出しが行われました。
3. DELETE呼び出しはタスクに対して行われます。

これは、プロジェクトが変更が行われたばかり後にロードされていることであるべきときに、プロジェクトが再びちょうど前に変更にロードされることを意味します。

これは私のプロジェクト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のコードです：あなたが使用する必要がありますproject-detail.component.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); 

    } 

Answer 1

の代わりにthenを返し、Promiseを返しますが、Observableは返しません。

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

Answer 2

私はFlatMap演算子を利用します：

someMethod(){ 
 
    let obs = this.deleteTask(task).subscribe(project => this.project = project); 
 
    } 
 

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

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

に役立ちます願っています。

編集：

私はあなたが望む行動を達成し、角2コンポーネントを作成しました。私はHTTPがほんの数ミリ秒待ってから、オブジェクトを返すために呼び出す嘲笑

注：ここでは

import { Component } from '@angular/core'; 
 
import { Http } from '@angular/http'; 
 
import { ActivatedRoute } from '@angular/router'; 
 
import { forwardRef, Directive, Input, ElementRef, Renderer, OnInit, AfterViewInit } from '@angular/core'; 
 
import { Observable } from 'rxjs/Observable'; 
 
import 'rxjs'; 
 

 
@Component({ 
 
    selector: 'app-home', 
 
    templateUrl: './home.component.html', 
 
    styleUrls: ['./home.component.less'] 
 
}) 
 
export class HomeComponent implements OnInit { 
 
    projectService: ProjectService; 
 
    project: Project; 
 

 
    constructor(private route: ActivatedRoute,http: Http){ 
 
    this.projectService = new ProjectService(http); 
 
    } 
 
    ngOnInit() { 
 
    this.getProject() 
 
     .subscribe(project => { 
 
     console.log(project); 
 
     this.project = project 
 
     }); 
 
    } 
 

 
    public getProject(): Observable<any> { 
 
    return this.route.params 
 
     .flatMap((params) => this.projectService.getProject(+params['id'])) 
 
    } 
 

 
    public delete(){ 
 
    this.deleteTask({id:1}); 
 
    } 
 
    public deleteTask(task): void { 
 
    this.projectService.deleteTask(task, this.project) 
 
     .flatMap((response: any) => { 
 
     return this.getProject(); 
 
     }) 
 
     .subscribe((project:Project)=>{ 
 
     this.project=project; 
 
    }); 
 
    } 
 
} 
 

 
export class ProjectService { 
 
    projectsURL = ""; 
 
    constructor(private http: Http) { 
 

 
    } 
 
    // public getProject(id: number): Observable<Project> { 
 
    // const url = `${this.projectsURL}/${id}`; 
 
    // return this.http.get(url) 
 
    //  .map(response => response.json() as Project) 
 
    // } 
 

 
    // public deleteTask(task: Task, project: Project): Observable<any> { 
 
    // const url = `${this.projectsURL}/${project.id}/tasks/${task.id}`; 
 
    // return this.http.delete(url) 
 
    //  .map(response => response.json()) 
 
    // } 
 

 
    public getProject(id: number): Observable<Project> { 
 
    return Observable.create(observer=>{ 
 
     console.log("Get Project"); 
 
     observer.next({id:"Project1"}) 
 
    }).delay(500); 
 
    } 
 

 
    public deleteTask(task: Task, project: Project): Observable<any> { 
 
    return Observable.create(observer=>{ 
 
     console.log("Delete task"); 
 
     observer.next({}); 
 
    }).delay(1000); 
 
    } 
 
} 
 

 
export class Project { 
 
    public id: string; 
 
} 
 

 
export class Task { 
 
    public id: string; 
 
}

<div > 
 
    <button (click)="delete()">Delete</button> 
 
</div>

は、私は私のコンソールで見た結果です。あなたは、actuall httpコールを行うコメント付きのメソッドを使用できます。