HTTPリクエストで非同期パイプを使用する利点

Question

角度チュートリアルの多くは、自動受信のために非同期パイプを使用することを推奨しています。
非同期パイプは自動退会観測に使用し、または他の手動

彼らが何をしたか解除する必要がありますされています：
彼らのようにREST APIを呼び出すために、角httpを使用し、彼らが主張する何

asyncパイプの例

しかし、わたしの理解から、角度HTTPは自動的にオブザーバブルの登録を解除します。したがって、非同期パイプがなくても、オブザーバブルは自動的にサブスクライブ解除されるため、非同期パイプは実際には意図した目的を果たしませんでした。

このユースケースで非同期パイプを使用する必要がある理由は他にありますか？

サンプル実装：

getUserList() { 
    return this.http.get(apiUrl); 
} 

this.getUserList().subscribe(user => { 
    this.userList = user; 
}); 

<div *ngFor="let user of userlist | async"> 
    {{ user?.name }} 
    {{ user?.email }} 
</div> 

Answer 1

非同期パイプは自動退会オブザーバのために使用されているか、あるいはあなたが退会する を必要とする手動

彼らはおそらく何を意味しますかそれは、オブザーバブルをクラスプロパティに割り当てるとY：

import { interval } from 'rxjs/observable/interval'; 
let original = interval(1000); 

class Comp { 
    o = original; 

し、後で別の観察

constructor() { 
    setTimeout(() => { 
     this.o = interval(500); 
    }, 5000); 
} 

とそのプロパティを更新し、元の観察へのサブスクリプションを配置する - 非同期パイプを効果original.unsubscribe()を呼び出します。これはソースで見ることができます。

@Pipe({name: 'async', pure: false}) 
export class AsyncPipe implements OnDestroy, PipeTransform { 
    ... 

    transform(obj: Observable<any>|Promise<any>|null|undefined): any { 
    .... 

    if (obj !== this._obj) { 
     this._dispose(); <------------------------- 
     return this.transform(obj as any); 
    } 

ので、非同期パイプは、実際にも、非同期パイプなしでここ 観測可能な意志の自動退会などの本来の目的を果たしていませんでした。

この使用で非同期パイプを使用する必要がある理由は他にありますか ケース？

はい、彼らは異なる目的のためにそれを使用 - 自分自身にあなたが示したアプローチに必要ないくつかのコーディングを保存するために：

getUserList() { 
    return this.http.get(apiUrl); 
} 

// this part can be eliminated if you use ` let user of getUserList() | async` 
this.getUserList().subscribe(user => { 
    this.userList = user; 
}); 

<div *ngFor="let user of userlist"> <---- no need to use `async` here since `userlist` contains values, not observable 
    {{ user?.name }} 
    {{ user?.email }} 
</div> 

Answer 2

あなたのテンプレートで直接観察を使用する場合にのみ、非同期パイプが必要です。したがって、非同期パイプの主なポイントは、テンプレート内のオブザーバブルを使用することです。また、自動解約は追加の利点となります。

だから、どちらか

<div *ngFor="let user of userlist"> 
</div> 

または

<div *ngFor="let user of getUserList() | async"> 
</div>