时间戳

首页 > 解决方案 > Angular 服务未在功能中更新

angular - Angular 服务未在功能中更新

问题描述

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

简短的问题：我有一个 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;
 }

标签： angulartypescript

解决方案

数据是异步分配的。该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
  }
);

有关如何在此处访问异步数据的更多信息。

推荐阅读