Kombinieren Sie den ersten Stream mit Modify-Streams mit RxJS

Question

Ich versuche, funktionale reaktive denken und eine Liste von Elementen auf einer Seite als Stream einrichten. Dies geschieht mit Angular2, aber das Problem sollte einer Stream-basierten Architektur ähneln. Also, ich habe derzeit zwei Streams, der anfängliche Stream (http-Aufruf, um eine Liste von Benutzern von Github zu erhalten) und einen Remove-Benutzer-Stream (tritt auf, wenn der Benutzer entfernen-Button geklickt wird). Ich glaube, das Marmordiagramm würde wie folgt aussehen:

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

Wie kombiniere ich diese Streams, um dies zu arbeiten? Ich denke auch später daran, mehr Streams zum Sortieren und Bestellen zu haben. Gehe ich das richtig? Hier ist der Code (beachten Sie, dieser Code unvollständig ist, derzeit der RemoveUser $ ist nicht interaktiv mit dem Benutzer $, die ihm zukommende):

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()); 
    } 
} 

hier die Plunker

ist zur Zeit ich nur anmelden um zu bestätigen, dass die Schaltfläche "Entfernen" angeklickt wird und den Benutzer übergibt.

Hier ist die HTML-Vorlage, die zeigt, dass ich für den Benutzer $ abonnieren, indem Sie von der Asynchron-Rohr (Angular2) mit:

<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 
    }); 
} 

meine Kommentare Hoffnung als Erklärung dienen kann. BehaviorSubject cache zuletzt ausgegebener Wert, so dass this.users $ .take (1) synchron ist. Ich benutze ein BehaviorSubject als Quelle für angular2 '| async 'Pipe sehr oft.

EDIT: Gleiche Idee, aber etwas kürzer für den removeUser$ Teil:

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