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

Question

我正在学习 Angular 和 Typescript。 现在，我想做这个：

1. 从 web api 获取用户列表

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

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

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

1. 呈现用户列表

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

1. 通过 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. 这是可以做到的吗？

2. 如果是，是应该做的事情，还是有更好的方法来完成我想做的事情？

   想！！！！

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

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

原因是，您正在手动更新数据 - 将名称设置为信号/通知以更新视图。

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

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