我有一项服务，该服务在可观察对象上发布对象，但是当我使用订阅更新数组时，新对象不会显示在列表（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）显示了新对象。