Question

我已经搜索了一个解决方案，但没有一个起作用。

点击按钮后，编辑将我重定向到编辑事件，我得到：

错误TypeError：无法读取未定义的属性“类别”

  ngOnInit() {
    this.eventService
    .getEventById(this.route.snapshot.params.id)
    .subscribe((ev) => this.event = ev);

在订阅之后，如果执行此操作：console.log（this.event），它将返回未定义的状态。而.subscribe(console.log(ev));向我返回了一个对象。不知道为什么this.event = ev不起作用我已经在另一个组件中使用了它，并且映射有效。

服务：

getEventById(id) {
    return this.httpClient.get<EventsDto>(this.urlevent + '?id=' + id);
  }

在edit-event.component.html中，打印{{event.name}}这怎么可能如果this.event未定义，如我们之前在.subscribe((ev) => this.event = ev)

中看到的那样

Answer 1

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

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

正如您正确地提到的那样，您的.subscribe(console.log(ev))正确地记录了数据，而您的同步console.log(ev)却没有。这是由于在您的console.log(ev)被调用之后将立即执行同步this.httpClient.get()的事实。由于返回异步数据需要花费一些时间，因此在触发同步ev时，变量undefined仍为console.log(ev)。相反，从console.log(ev)块中调用subscribe()会专门等待从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)
    });

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

1 个答案: