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()
}

2. render user list

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

3. 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!!!!

CodePudding user response：

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.id)">
    ....
  </li>
</ul>

And script

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