CODEWITHSUNDEEP
angularrxjs
kkerwin
kkerwin

Reputation: 15

How to update data in Observable in Angular? rxjs

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

  1. 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()
}
  1. render user list
<ul>
  <li *ngFor="let item of list$ | async">
    <input (ngModelChange) = "changeName($event,item.id)">
    ....
  </li>
</ul>
  1. 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)
    }
  }

  1. Is this something that can be done?

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

    thinks!!!!

Upvotes: 1

Views: 3316

Answers (2)

Mahesh Bongani
Mahesh Bongani

Reputation: 730

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;
    }
  }

Upvotes: 1

Jimmy
Jimmy

Reputation: 1419

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

Upvotes: 0

Related Questions