为什么这个数组未定义以及如何修复？

Question

我的代码有问题。它说我的数组是未定义的，但后来的一种方法可以正常工作。这是代码：

books: IBook[] = [];
[...]
  ngOnInit() {
    this.service.getEmployees().subscribe(
      (listBooks) => this.books = listBooks,
      (err) => console.log(err)
    ); 
  }
[...]
 events: CalendarEvent[] = [
    {
      start: new Date(),
      end: new Date(),
      title: ""+this.books[0].device, //this.books[0] is undefined
      color: colors.yellow,
      actions: this.actions,
      resizable: {
        beforeStart: true,
        afterEnd: true
      },
      draggable: true
    },
[...]
test(){                     //this method is linked to a button
  console.log(this.books[0]) //after clicking it works fine
}
[...]

测试方法在数组之后，上面写着 'undefined' 所以它不能未定义，对吗？

Answer 1

您在代码中的什么位置执行此操作？ :

 events: CalendarEvent[] = [
    {
      start: new Date(),
      end: new Date(),
      title: ""+this.books[0].device, //this.books[0] is undefined
      color: colors.yellow,
      actions: this.actions,
      resizable: {
        beforeStart: true,
        afterEnd: true
      },
      draggable: true
    },
[...]

如果这段代码在 ngOnInit 方法中，你应该像这样把它放在订阅回调中：

 ngOnInit() {
    this.service.getEmployees().subscribe(
      (listBooks) => {
         this.books = listBooks
         [...]
         events: CalendarEvent[] = [
        {
          start: new Date(),
          end: new Date(),
          title: ""+this.books[0].device, //this.books[0] is undefined
          color: colors.yellow,
          actions: this.actions,
          resizable: {
          beforeStart: true,
          afterEnd: true
         },
         draggable: true
        },
        [...]
      },
      (err) => console.log(err)
    ); 
  }

getEmployees 的调用是异步的，这意味着 events 对象可能会在 books 对象被初始化的回调函数之前被初始化。希望清楚

Answer 2

首先，ngOnInit中的getEmployees()运行是异步的。浏览器继续同步执行 events 分配，但 listBooks 将在稍后的某个时间从调用中解析。

因此，您应该在解析数据后修复逻辑并初始化 events，并可能在未定义的情况下处理您期望的信息：

title: this.books[0] ? ""+this.books[0].device : ""

最后，当您想要分配新数据时，您需要对 books 进行不可变操作：

this.books  = [...listBooks]

为什么这个数组未定义以及如何修复？

Why is this Array undefined and how to fix?

arrays

undefined

typescript

angular