如何在 Angular 11 中动态创建对象数组？答案

【问题标题】：How to create array of objects dynamically in Angular 11?如何在 Angular 11 中动态创建对象数组？
【发布时间】：2021-04-29 03:14:15
【问题描述】：

我正在尝试在 Angular 中动态创建对象数组。我有这段代码：

 data:{title:any,date:any};
  arr:any=[]
  this.service.calendarBooking().subscribe((res: any) => {
      for (let i = 0; i < res.data.length; i++) {
        // Creating object from API Response
        this.data={title:res.data[i].name,date:res.data[i].date}
        // Pushing object to array
        this.arr.push(this.data)
      }
    })

当我打印数组时，数组响应如下：

0: {title: "spss", date: "2021-01-30"}
1: {title: "spss", date: "2021-01-29"}
2: {title: "spss", date: "2021-01-28"}

但是当我尝试访问索引时（arr[0],arr[1]），响应未定义，arr 的长度为零如何解决这个问题？

【问题讨论】：

尝试使用arr[0].title 或arr[0].date
我的猜测是。他尝试在订阅之外访问，但 javascript ist 非阻塞
感谢您的回复。它给出的错误无法读取未定义的属性 0
很可能您正在订阅之外进行尝试。在这种情况下，您只能在订阅内访问它们。数据是异步分配的。请完整阅读this 答案以了解异步数据的工作原理。

标签： javascript angular angular11

【解决方案1】：

this.arr 是不同的，你在 data:{title:any,date:any}; 下写的 arr不一样，

将其推送到 arr.push(this.data) 或访问类似 (this.arr[0] , this.arr[1])

【讨论】：

【解决方案2】：

首先，如果您得到预期结果，则在 for 循环之后打印数组，那么问题出在回调上，因此请执行异步等待调用，该调用将等待系统直到收到响应或错误。

如果在 for 循环后没有打印数据，则键入数组变量。这就是你可以输入它的方式。 arr: 数组 = [{}];

【讨论】：

【解决方案3】：

检查如下

this.service.calendarBooking().subscribe((res: any) => {
     for (let i = 0; i < res.data.length; i++) {
         //this.data={title:res.data[i].name,date:res.data[i].date}
         // Pushing object to array
         this.arr.push({
              title: res.data[i].name,
              date:res.data[i].date
         });
     }
     console.log(this.arr,this.arr[1]);
});

我想这会对你有所帮助

【讨论】：