Using TypeScript, add an observable to an array of observables using RxJS

Question

Using TypeScript, add an observable to an array of observables using RxJS

Can someone explain how to include Observable<News> in an array of observables?

newsArray: Observable<Array<any>>;

addNews(newsId: number) {
   let news = this.newsService.getNewNews(newsId); // this results in an Observable<News>.

  //How can I add `news` to `newsArray` so it can be shown in the UI?
}

HTML:

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

Are there any other operators that would help in this situation?

I attempted to use BehaviourSubject but it only displays one value at a time. I want to showcase all items being added to the array.

arrays angular typescript rxjs observable

Answer 1

Answer №1

If you want to stay updated with the latest news, you can utilize a scan function

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>

Answer 2

If you want to stay updated with the latest news, you can utilize a scan function

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>

Using TypeScript, add an observable to an array of observables using RxJS

Answer №1

Similar questions

Having trouble integrating SVG icons into my Angular project

Decipher the enigmatic bytea encoding of a Java int[][] array and restore it to its original form using

What could be causing the "Permission Denied" error to occur when attempting to post data to Firebase realtime database using Angular?

Find the total of values in an array that may be null or undefined

The icon for caret down in FontAwesome is not displaying when using ngClass

Angular's ng serve is experiencing issues with mark-compacts near the heap limit, leading to an unsuccessful allocation

Incorporate a CSS framework into the Angular vendor bundle

The Effect feature in Angular NgRx can sometimes lead to a never-ending loop

Generating JSON data with Ruby for a collection of items

Is it possible to deactivate the click event on an Angular mat table row?

Using JavaScript's indexOf method with multiple search values

Guide on assigning JSON response values to TypeScript variables in Angular 4

Issue with launching Angular 6 project

Creating an index for a JSONB column in Postgres that contains an array of JSON values

What steps can be taken to further personalize this pre-existing jQuery sorting solution?

What is the best way to utilize a variable from a function when using ngClass in Angular?

Exploring Angular observables: Tips for gathering specific fields from a nested array within an object into a new array

Issue: Execution terminated with error code 1: ts-node --compiler-params {"module":"CommonJS"} prisma/seed.ts

Learn how to dynamically enable or disable the add and remove buttons in the PrimeNG PickList using Angular 2

Exploring Angular 6 with Universal Karma for effective module testing