如何在 Angular 中更新 Observable 中的数据？ rxjs

Question

我正在努力学习 Angular 和 Typescript。现在，我想这样做：

从网络获取用户列表api

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

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

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

呈现用户列表

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

通过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)
    }
  }

这是可以做到的吗？
如果是，这是应该做的事情，还是有更好的方法来完成我想做的事情？

认为!!!!

Answer 1

更改代码以将 item 发送到 changeName 方法，并在 API 更新响应成功后修改 changeName 方法中的 item.name=newName。当我们传递项目的引用时，我们应该看到正确更新的名称。

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

和脚本

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

Answer 2

虽然解决方案有效。我认为这不是推荐的方法。

原因是，您正在手动更新数据 - 将要更新的视图的名称设置为 signal/notify。

使用 Observer/Observable - 响应式编程，我们希望视图在数据更改时自动更新。

这个问题的解决方案是使用 Subject，每次您更改某些内容时，Subject 都会将该更改推送给它的订阅者

如何在 Angular 中更新 Observable 中的数据？ rxjs

How to update data in Observable in Angular? rxjs

rxjs

angular