引用我希望从服务器接收的数据答案

【问题标题】：Referencing data I expect to receive from server引用我希望从服务器接收的数据
【发布时间】：2020-10-14 20:07:26
【问题描述】：

这里是新的，如果我没有按照您的期望进行布局，敬请见谅。

所以我将我的反应式表单数据提交到服务器（mongodb 数据库）。然后，我想路由到一个新路径，将数据库返回到前端的 ID 元素作为 URL 中的参数传递。

这是我目前在提交功能中所拥有的：

  onsubmit(){
    let opdata = null;
    this.location.saveOpnote(this.form.value)
    .subscribe(response => {
      opdata = response
      console.log(response)
    })
    this.route.navigate(['/opnotes/mopsdisplay', opdata._id])

  }

所以数据完美保存，后端返回新条目的_id。浏览器抱怨：

错误类型错误：无法读取 null 的属性“_id”

我的理解是浏览器在保存到服务器的异步部分完成并且_id可用之前正在查看这个。

我该如何解决这个问题？

非常感谢。

【问题讨论】：

没有办法解决这个问题。异步必须是异步的。如果您的订阅库有办法转换为 Promise，请使用它，然后使用 await 它或在返回的 Promise 上调用 .then()。你标记了angular，所以也许看看这个答案：Subscription to promise。本质上，你想要subscription -> promise -> .then() -> navigation。
也相关：How do I return the response from an asynchronous call?
导航功能不在响应处理内是不是有原因？

标签： javascript angular mongodb asynchronous

【解决方案1】：

您希望完成您的请求，因此导航部分应该是订阅内的最后一行，而不是订阅外的最后一行。正如您提到的，由于您对保存的调用是异步的，因此导航块在保存操作完成之前执行。

【讨论】：

【解决方案2】：

您可以创建一个新函数navigateToMopsDisplay 来导航到您想要的路线。一旦Opnotes 被保存，opdata 响应可以通过opdata._id 发送到navigateToMopsDisplay 并且可以导航

navigateToMopsDisplay(id) {
  this.route.navigate(["/opnotes/mopsdisplay", id]);
}


onsubmit() {
  this.location.saveOpnote(this.form.value).subscribe(response => {
    const opdata = response;
    this.navigateToMopsDisplay(opdata._id);
  });
}

【讨论】：