Angular 服务未在功能中更新 [重复]答案

【问题标题】：Angular Service not updated in function [duplicate]Angular 服务未在功能中更新 [重复]
【发布时间】：2020-10-08 18:13:17
【问题描述】：

编辑：对不起大家，我当然首先用谷歌搜索，但找不到令人满意的答案。谢谢大家的快速帮助。

short 问题：我有一个 Angular 组件，它从提交的值中按下按钮时从服务器获取数据。此数据应通过服务传递到下一个组件。然而，这似乎并不同步工作。如果我按下添加按钮 console.log(this.jsonData) 什么也不输出。当我第二次按下它时，会显示来自服务器的正确数据。

这一定与 Angular 有关，但我不知道为什么会发生这种情况。我希望有人经历过类似的事情并可以提供帮助。谢谢！

HTML：

 <form>
      <input #userName type="text" required>
      <input #seqNumber type="number" min="1" max="70">
 </form>
<button (click)="add(userName.value, seqNumber.value);">
  add
</button>

组件.ts

add(name: string, seqNum: string): void {

this.inputUser = name;
this.seqNumber = seqNum;

this.loginService.getSequence(name, seqNum)
.subscribe(data => this.jsonData = data);
console.log(this.jsonData);
}

和 service.ts

 // fetches sequence from server
getSequence(userId: string, sessionNum: string): any {

 const options = { 
  params: new HttpParams()
  .set('userId', userId)
  .set('sessionNum', sessionNum)};

  const sequence = this.http.get<Sequence[]>(this.loginUrl, options);
  return sequence;
 }

【问题讨论】：

它是异步的，您无法在订阅之外进行控制台

标签： angular typescript

【解决方案1】：

数据是异步分配的。 this.jsonData 变量在被访问时仍未定义。任何直接依赖于this.jsonData 的语句都应该在订阅中。

this.loginService.getSequence(name, seqNum).subscribe(
  data => { 
    this.jsonData = data;
    console.log(this.jsonData);
  },
  error => {
    // always good practice to handle HTTP erros
  }
);

更多关于如何访问异步数据here的信息。

【讨论】：

【解决方案2】：

Subscribe 是一个异步操作符，如果你在 subscribe 中打印 jsondata，你会在第一次点击时得到它，如下所示。实际上，如果您将其保留在订阅之外，它甚至会在获取数据之前打印。 subscribe 中的代码只有在响应出现时才会被调用。如果您将其保留在订阅之外，它将不会等到收到执行 console.log 的响应。

add(name: string, seqNum: string): void {

this.inputUser = name;
this.seqNumber = seqNum;
this.loginService.getSequence(name, seqNum)
.subscribe(data => {
    this.jsonData = data;
    console.log(this.jsonData);
});

}

【讨论】：