title: How transform observable into another observable
body: <p>I'm starting with Rxjs for Angular 6 and I have some doubts about how accomplish this:</p>
  
  <p>I have a card list component which will show list with items fetched from a service which returns an observable. Data type items are different. And service observable may be updated with new items so card list should display this new items.</p>
  
  <pre class="lang-js prettyprint-override"><code>export class HomeComponent implements OnInit, OnDestroy {
  
    papers$:Observable&lt;Paper[]&gt;;
  
    papersPublished$:Observable&lt;DataCard[]&gt;;
    papersOnReview$:Observable&lt;DataCard[]&gt;;
    papersSubmitted$:Observable&lt;DataCard[]&gt;;
  
    constructor(private publicationService: PublicationService) { }
  
    ngOnInit() {
      this.papers$ = merge(
        this.publicationService.getAllPapersOnState("Submitted"),
        this.publicationService.getAllPapersOnState("OnReview"),
        this.publicationService.getAllPapersOnState("Published")
      );
  
          this.papersSubmitted$ = this.papers$.pipe(map(paper =&gt; [HomeComponent.paperToCard(paper,'Read', 'Review')]));
          this.papersOnReview$ = this.papers$.pipe(map(paper =&gt; [HomeComponent.paperToCard(paper,'Read', 'Accept')]));
          this.papersPublished$ = this.papers$.pipe(map(paper =&gt; [HomeComponent.paperToCard(paper,'Read', '')]));
        }
  
    private static paperToCard(paper, action_1_name, action_2_name): DataCard {
          // ... other code ...
    }
  }
  
  &lt;app-cardlist
    [title]="'Published'"
    [description]="'Last science papers published. Yay!'"
    [items$]="papersPublished$"&gt;&lt;/app-cardlist&gt;
  &lt;app-cardlist
    [title]="'On Review'"
    [description]="'Last papers on review. On publish way!'"
    [items$]="papersOnReview$"&gt;&lt;/app-cardlist&gt;
  &lt;app-cardlist
    [title]="'Submitted'"
    [description]="'Last papers submitted for reviewing. Be the first one to check them!'"
    [items$]="papersSubmitted$"&gt;&lt;/app-cardlist&gt;
  
  
  
  export class PublicationService {
   // ... more code ...
   getAllPapersOnState(state: string): Observable&lt;Paper[]&gt; {
      return Observable.create(observer =&gt; {
        this.WF_SC.deployed().then(instance =&gt; {
  
          // State changed watcher to update on-live the observable
          const event = instance.AssetStateChanged({});
          event.on('data', (data) =&gt; {
            console.log('StateChanged catched!');
            this.getPaper((data['args']['assetAddress'])).then((paper) =&gt; observer.next(paper));
          });
  
          return instance.findAssetsByState.call(state);
        }).then(addresses =&gt; {
          addresses.forEach((address) =&gt; this.getPaper(address).then((paper) =&gt; observer.next(paper)));
        });
      });
    }
  }
  
  
  export class CardlistComponent implements OnInit {
  
    @Input() items$: Observable&lt;DataCard[]&gt;;
  
  }
  
  &lt;div *ngIf="(items$ | async)" class="card-deck"&gt;
    &lt;div *ngFor="let item of items$ | async" class="card" style="width: 18rem;"&gt;
      &lt;!-- Other code --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The issue is that only last item is displayed on the list. How can I transform <code>papers$:Observable&lt;Paper[]&gt;</code> into <code>$papersSubmitted$:Observable&lt;DataCard[]&gt;</code> to be able pass it to <code>CardlistComponent</code> ?</p>