Angular：更改后获取新数据

Question

我有一个服务，它使用两种方法向我的 API 发送 HTTP 请求：一种是获取数据，另一种是在点击事件后更新对象。

我的初始数据在调用ngOnInit()时存储：

ngOnInit() {
    this.data = this.myservice.getData();
}

点击按钮时调用方法：

update(id) {
    this.myservice.update(id);    
}

这很好用，但是当我单击更新方法时，我需要刷新页面以查看具有新更新值的数据。 我对 Angular 很陌生，我想知道如何解决这个问题。更新调用后，我尝试在更新函数中重新获取数据，但没有帮助。

Answer 1

您需要使用更新后的新 ID 更新您的“数据”变量。只需在调用更新方法后执行this.data = this.myservice.getData();。这就是为什么您在重新加载页面时看到它的原因。你在 ngOnInit 上调用它

Answer 2

如果发生任何更改，您可以使用主题包装的 observable 并订阅任何主题。如果发生任何变化，回调函数将重新抓取数据以更新列表。

为您服务

dataChangesSubject = new Subject<any>();

然后修改函数（我假设你的服务中声明了数据）

在你的服务更新函数的末尾添加

      this.dataChangesSubject.next(this.data);

在你的组件中

ngOnInit() {
  this.myservice.dataChangesSubject.
    subscribe((data) => this.data = data;
    )
  this.data = this.myservice.getData();
}

---

或者，您可以让 observable 不返回任何数据，并执行您所做的任何代码来更新您的列表。 所以在你的服务中，仍然声明主题

dataChangesSubject = new Subject<void>();

在您的服务更新功能中，只需通知更改即可。

this.dataChangesSubject.next();

然后在您的组件中，添加您所做的任何代码以在 next 的回调函数中获取最新数据

ngOnInit() {
  this.myservice.dataChangesSubject.
    subscribe(() => {
      //code goes here 
      this.data = this.myservice.getData();
      }
    )
  this.data = this.myservice.getData();
}