Question

Angular8 TypeError：无法读取未定义的属性“forEach”

2020-03-21

398

angular typescript asynchronous undefined

ive已经搜索了一个解决方案，但它们都没有起作用。

单击按钮编辑后，它将其重定向到Edit-Event，我得到了：

2455551832
 
 849591649
 
  订阅后，如果我这样做：console.log（this.event），它将我返回我不确定。
wherease
  .subscribe（console.log（ev））;
  返回我一个对象。
不知道为什么
  this.event = ev
  不起作用，我已经在另一个组件中使用了它，并且映射有效。
 
 
  服务：
 
 933967149
 
  在edit-event.component.html中，{{event.name}}打印了如何可能的
如果此event如以前所见，那么event是未定义的：
  .subscribe（（ev）=＆gt; this.event = ev）

Answer 1

tl;dr - 通过在按钮按下函数内调用 this.http.get() 来分组异步逻辑，并在其 subscribe() 方法中应用任何下游逻辑

在处理异步代码时，您必须格外小心，以确保异步函数（例如，您的 this.httpClient.get 请求）在您尝试与其交互、显示数据等之前已返回数据。

正如您正确提到的，您的 .subscribe(console.log(ev)) 正确记录了数据，但您的同步 console.log(ev) 却没有。这是因为同步 console.log(ev) 将在调用 this.httpClient.get() 后立即执行。由于异步数据需要一些时间才能返回，因此在触发同步 console.log(ev) 时，变量 ev 仍为 undefined 。从 subscribe() 块中调用 console.log(ev) 会专门等待 this.httpClient.get() 返回数据后再执行，从而保证 ev 将具有您请求的数据（或错误）。

考虑到这一点，缓解问题的一个简单方法是在按钮单击事件中调用 this.http.get() 请求，并在 .subscribe() 函数中包含任何下游功能。这将允许编译器保证在调用后续函数时某些数据可用。

.html

<button (click)="buttonClick()></button>

.ts

buttonClick() {
  this.eventService
    .getEventById(this.route.snapshot.params.id)
    .subscribe(ev => {
      this.event = ev
      // your code here, e.g. createEventsDto(ev)
    });