Как обновить представление, когда наблюдаемая подписка изменяется на угловую 6?

Question

У меня есть служба, которая публикует объекты на наблюдаемой, но когда я обновляю массив с помощью подписки, новый объект не отображается в списке (html):

export class PublicationService {
// ... more code ...
getAllPapersOnState(state: string): Observable<Paper> {
    return Observable.create(observer => {
      this.WF_SC.deployed().then(instance => {

        // State changed watcher to update on-live the observable
        const event = instance.AssetStateChanged({});
        event.on('data', (data) => {
          console.log('StateChanged catched!');
          this.getPaper((data['args']['assetAddress'])).then((paper) => observer.next(paper));
        });

        // TODO Filter by asset type
        return instance.findAssetsByState.call(state);
      }).then(addresses => {
        addresses.forEach((address) => this.getPaper(address).then((paper) => observer.next(paper)));
      });
    });
  }
}

export class HomeComponent implements OnInit, OnDestroy {

  papersSubmitted$:Observable<DataCard>;
  papersOnReview$:Observable<DataCard>;
  papersPublished$:Observable<DataCard>;

  constructor(private publicationService: PublicationService) { }

  ngOnInit() {
    this.papersSubmitted$ = this.publicationService.getAllPapersOnState("Submitted").pipe(
      map(paper => HomeComponent.paperToCard(paper,'Read', 'Review'))
    );
    this.papersOnReview$ = this.publicationService.getAllPapersOnState("OnReview").pipe(
      map(paper => HomeComponent.paperToCard(paper,'Read', 'Accept'))
    );
    this.papersPublished$ = this.publicationService.getAllPapersOnState("Published").pipe(
      map(paper => HomeComponent.paperToCard(paper,'Read', ''))
    );
  }
  // ... more code ...

}
<app-cardlist
  [title]="'Published'"
  [description]="'Last science papers published. Yay!'"
  [collection$]="papersPublished$"
  (clickActionCard)="clickActionCardHandlePublished($event)"></app-cardlist>
<app-cardlist
  [title]="'On Review'"
  [description]="'Last papers on review. On publish way!'"
  [collection$]="papersOnReview$"
  (clickActionCard)="clickActionCardHandleOnReview($event)"></app-cardlist>
<app-cardlist
  [title]="'Submitted'"
  [description]="'Last papers submitted for reviewing. Be the first one to check them!'"
  [collection$]="papersSubmitted$"
  (clickActionCard)="clickActionCardHandleSubmitted($event)"></app-cardlist>

export class CardlistComponent implements OnInit {

  @Input() title;
  @Input() description;
  @Input() collection$: Observable<DataCard>;
  items:DataCard[] = [];
  subscription:Subscription;

  @Output() clickActionCard: EventEmitter<any> = new EventEmitter();

  constructor() { }

  ngOnInit() {
    this.subscription = this.collection$.subscribe((data_card:DataCard) => {
      console.log(data_card);
      this.items.push(data_card);
      console.log(this.items);
    })
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}
<div *ngIf="(items)" class="card-deck">
  <div *ngFor="let item of items" class="card" style="width: 18rem;">
    <div class="card-body">
      <div class="card-body">
        <h5 class="card-title">{{item['title']}}</h5>
        <h6 class="card-subtitle mb-2 text-muted">{{item['subtitle']}}</h6>
        <p class="card-text">{{item['description']}}</p>
        <a href="#" (click)="onClickAction(1, item)" class="card-link">{{item['action_1_name']}}</a>
        <a href="#" (click)="onClickAction(2, item)" class="card-link">{{item['action_2_name']}}</a>
      </div>
    </div>
  </div>
</div>

Новый объектопубликованный в наблюдаемой $ collection должен отображаться в CardList, но ничего не обновляется, хотя console.log (data_card) показывает новый объект.

Код репозитория: HomeComponent , CardListComponent