RxJS append observable to observable array list in typescript

Question

How to add Observable<News> to an array of observable ?

newsArray: Observable<Array<any>>;

addNews(newsId: number) {
   let news = this.newsService.getNewNews(newsId); // this returns a Observable<News> type.

  //I want to add `news` to `newsArray` to display it in UI.
}

HTML:

<li *ngFor="let item of (newsArray | async)">
  <div>{{item.Id}}: {{item.DataValue}}</div>
</li>

Any other operators to use?

I tried BehaviourSubject but it displays only one value at a time. I want to display add items that I am appending to an arrray.

Sreekumar P · Accepted Answer · 2018-02-08 05:33:10Z

6

You can use scan to accumulate news

news$:Observable<any>
loadMore$=new Subject<number>()

ngOnInit(){
 this.news$=this.loadMore$
 .switchMap((newsId)=>this.newsService.getNewNews(newsId))
 .scan((acc,curr)=>{
    acc.push(curr)
    return acc
 },[]).startWith(null)
}

addNews(newsId: number) {
  this.loadMore$.next(newsId);
}

HTML

<li *ngFor="let item of (news$ | async)">
  <div>{{item.Id}}: {{item.DataValue}}</div>
</li>

edited Feb 8, 2018 at 5:33

Sreekumar P

6,06812 gold badges62 silver badges84 bronze badges

answered Feb 8, 2018 at 4:22

Fan Cheung

11.5k3 gold badges21 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sreekumar P Over a year ago

but I want to add news on a button click event, also there is an NewsId that I want to pass it to API based on that news will be fectched.

Andrew Howard Over a year ago

And if we wanted to add to the top of the array it’s just a normal acc.unshift?

Fan Cheung Over a year ago

yep you are right.

Andrew Howard Over a year ago

Thanks. Also are you allowed to put in an if else statement inside scan? Or do we have to use filter? Depending on what button was pressed I either need to do unshift or push

Fan Cheung Over a year ago

inside scan it is just normal sync code , yes you can

Collectives™ on Stack Overflow

RxJS append observable to observable array list in typescript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related