角2を観測することを約束する

Question

角2のチュートリアルに続いて。次のメソッドをpromisesからobservablesに変換しようとしています。私の試みは以下の通りです。

1）コンバージョンは補正されていますか？

2）どのように私はgetGroup()方法

getGroups（）

// Promise 
    getGroups(): Promise<Group[]> { 
    return this.http.get(this.groupsUrl) 
     .toPromise() 
     .then(response => response.json().data as Group[]) 
     .catch(this.handleError); 
    } 
    // Observable 
    getGroups(): Observable<Group[]> { 
    return this.http.get(this.groupsUrl) 
     .map(this.extractData) 
     .catch(this.handleError); 
    } 
    private extractData(response: Response) { 
    let body = response.json(); 
    return body.data || { }; 
    } 

のgetGroup（）

// Promise 
    getGroup(id: number): Promise<Group> { 
    return this.getGroups() 
     .then(groups => groups.find(group => group.id === id)); 
    } 
    // Observable 
    // ================ 
    // HOW? 
    // ================ 

にcreateGroup（）

// Promise 
    createGroup(name: string): Promise<Group> { 
    return this.http 
     .post(this.groupsUrl, JSON.stringify({name: name}), {headers: this.headers}) 
     .toPromise() 
     .then(res => res.json().data) 
     .catch(this.handleError); 
    } 
    // Observable 
    createGroup(name: string): Observable<Group> { 
    return this.http 
     .post(this.groupsUrl, JSON.stringify({name: name}), {headers: this.headers}) 
     .map(res => res.json().data) 
     .catch(this.handleError); 
    } 

updateGroup（）変換します

// Promise 
    updateGroup(group: Group): Promise<Group> { 
    const url = `${this.groupsUrl}/${group.id}`; 
    return this.http 
     .put(url, JSON.stringify(group), {headers: this.headers}) 
     .toPromise() 
     .then(() => group) 
     .catch(this.handleError); 
    } 
    // Observable 
    updateGroup(group: Group): Observable<Group> { 
    const url = `${this.groupsUrl}/${group.id}`; 
    return this.http 
     .put(url, JSON.stringify(group), {headers: this.headers}) 
     .map(() => group) 
     .catch(this.handleError); 
    } 

deleteGroup（）

// Promise 
    deleteGroup(id: number): Promise<void> { 
    const url = `${this.groupsUrl}/${id}`; 
    return this.http 
     .delete(url, {headers: this.headers}) 
     .toPromise() 
     .then(() => null) 
     .catch(this.handleError); 
    } 
    // Observable 
    deleteGroup(id: number): Observable<void> { 
    const url = `${this.groupsUrl}/${id}`; 
    return this.http 
     .delete(url, {headers: this.headers}) 
     .map(() => null) 
     .catch(this.handleError); 
    } 

} 

Answer 1

1）の変換は正しいですか？

変換が正しくないようです。観察可能なコールバックにfunctionの参照を渡すことによって、thisコンテキストを失うことになります。 this &の呼び出し関数を明示的に使用するには、Arrow functionを使用する必要があります。

// Observable 
getGroups(): Observable<Group[]> { 
    return this.http.get(this.groupsUrl) 
     .map(this.extractData) //don't pass function reference 
     .catch(this.handleError); 
} 

は

// Observable 
getGroups(): Observable<Group[]> { 
    return this.http.get(this.groupsUrl) 
    //.map(this.extractData.bind()) //this would work but its bad pattern 
    .map(()=> this.extractData()) 
    .catch(this.handleError); 
} 

あなたのコード内のどこかで繰り返し同じことをした場合は、他の機能のために同じことをフォローする必要があります。

2）どのように私はそれは単に

getGroup(id: number): Promise<Group> { 
    return this.getGroups() 
     .map(groups => groups.find(group => group.id === id)); 
} 

以下のようになりますのgetGroup（）メソッド

を変換します