How to update data in Observable in Angular? rxjs

Question

I am working on learning Angular and Typescript. Now, I want to do this：

get user list from web api

public list$:Observable<{id:string,name:string,like:number}[]> = new Observable()

ngOnInit(): void {
   this.getData()
}

getData(){
   this.list$ = this.service.getUserList()
}

render user list

<ul>
  <li *ngFor="let item of list$ | async">
    <input (ngModelChange) = "changeName($event,item.id)">
    ....
  </li>
</ul>

change the user name by id

  async changeName(newName:string,id:string){
    const res = await this.service.changeName(newName,id).toPromise()
    if(res.success){
       // How to update this.list$ , without send a new request     
       // just like this:
       // this.userList = this.userList.map(i=>i.id === id ? { ...i, name:newName } : i)
    }
  }

Is this something that can be done?
If yes, is it something that SHOULD be done, or is there a better way to accomplish what I am trying to do?

thinks!!!!

Subscribe it in the component, do your thing, render it. Unsubscribe in the onDestroy() method — Mustafa
– Mustafa, Commented Dec 9, 2021 at 9:26

Mahesh Bongani · Accepted Answer · 2022-01-04 11:11:39Z

1

Change your code to send item to changeName method and modify the item.name=newName inside changeName method after successful API update response. As we are passing the reference of the item we should see the name updated properly.

<ul>
  <li *ngFor="let item of list$ | async">
    <input (ngModelChange) = "changeName($event,item)">
    ....
  </li>
</ul>

And script

async changeName(newName:string,item:any){
    const res = await this.service.changeName(newName, item.id).toPromise()
    if(res.success){
       item.name=newName;
    }
  }

edited Jan 4, 2022 at 11:11

answered Dec 9, 2021 at 9:27

Mahesh Bongani

7327 silver badges20 bronze badges

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

2 Comments

kkerwin Over a year ago

👍👍👍👍👍👍👍 thanks

Mahesh Bongani Over a year ago

@kkerwin Please upvote if you feel it helped you so that it will helps other and also motivates my work.

Jimmy · Accepted Answer · 2021-12-10 06:19:24Z

0

While the solution works. I don't think it's the recommended way to do.

The reason is, you are updating the data manually - set the name to signal/notify for the view to update.

With Observer/Observable - reactive programming, we want the view to update automatically whenever the data change.

The solution for this is to use Subject, where every time you change something, the Subject will push that change to its subscribers

answered Dec 10, 2021 at 6:19

Jimmy

1,4498 silver badges8 bronze badges

2 Comments

kkerwin Over a year ago

[stackblitz.com/edit/… hello, When i use Subject，I can't get "the old data(the data from web api )", So i used BehaviorSubject , because i can use BehaviorSubject.value get the data. Is there anything wrong with me doing this？ Can you give me an example? thanks!

Jimmy Over a year ago

True. In case you want "the old data", BehaviorSubject is needed. You learnt it quick, great!

Collectives™ on Stack Overflow

How to update data in Observable in Angular? rxjs

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related