RxJSでストリームを修正して初期ストリームを結合する

Question

私は機能的反応を考え、ページ上の要素のリストをストリームとして設定しようとしています。これはAngular2を使用していますが、問題はストリームベースのアーキテクチャに似ているはずです。だから、私は現在、2つのストリームがあります。最初のストリーム（githubからユーザーリストを取得するためのhttp呼び出し）とユーザーストリームの削除（ユーザーの削除ボタンがクリックされたときに発生します）。私は大理石の図が次のようになると信じています：

|[user1,user2,user3]|      <--- http initial stream 
|---------------------x----------x-----... <--- x denotes user removed 

これを動作させるには、これらのストリームをどのように組み合わせますか？私はまた、並べ替えや順序付けのためのストリームが増えたことを後で考えています。私はこれについて正しいことをしていますか？ここでは、コードです（このコードは不完全であることに注意が、現在はremoveUser $は、それが必要ユーザーの$とインタラクティブではありません）：

export class UserGridComponent implements OnInit { 
    public users$: Observable<any>; 
    public removeUser$: Subject; 

    constructor(private _githubUserService: GithubUserService) { } 

    ngOnInit() { 
     this.removeUser$ = new Subject() 
      .subscribe((user) => { console.log('next ' + JSON.stringify(user)}); 
     this.users$ = this._githubUserService.getUsers() 
      .map((res) => res.json()); 
    } 
} 

ここ

は、現在、私が唯一ログインしていPlunker

です削除ボタンがクリックされたことをコンソールでユーザーに渡します。ここで

は、私は非同期パイプ（Angular2）を使用してユーザー$に加入することを示しているHTMLテンプレートです：

<md-list> 
    <h1 md-header>GitHub Users</h1> 
    <md-list-item *ngFor="let user of users$ | async"> 
    <a href="https://github.com/{{user.login}}" target="_new"> 
     <img md-list-avatar [src]="user.avatar_url"> 
    </a> 
    <h4>{{user.login}}</h4> 
    <button md-icon-button (click)="removeUser$.next(user)"> 
     <md-icon>cancel</md-icon> 
    </button> 
    </md-list-item> 
</md-list> 

Answer 1

ngOnInit() { 
    this.users$ = new BehaviorSubject([]); // init with empty user array 
    this._githubUserService.getUsers() 
     .map((res) => res.json()) 
     .subscribe(this.users$); 

    this.removeUser$ = new Subject(); 
    this.removeUser$.subscribe((user) => { 
     this.users$.take(1) // get current users, as users$ is a BehaviorSubject 
      .map(users => users.filter(u => u != user)) // remove `user` 
      .subscribe(this.users$); // update users$ stream 
    }); 
} 

私のコメントが説明として役立つことを願って。 BehaviorSubjectキャッシュは最後に出力された値をキャッシュするため、this.users $ .take（1）は同期しています。 BehaviorSubjectをangular2のソースとして使用しています。非同期パイプが非常に頻繁に使用されます。

EDIT：同じ考えが、removeUser$一部のために少し短い：

..... 
    this.removeUser$.withLatestFrom(user$, 
     (toRemove, users) => users.filter(u => u != toRemove) // remove `toRemove` 
    ).subscribe(this.users$); // update users$ stream