Question

我可以在控制台中打印数组，但无法获取长度，也无法访问第一个元素

我正在做一个项目，遇到了这个问题，我可以在控制台中打印数组，但无法获取长度，也无法访问第一个元素。

代码：

checkout.component.ts：

getCheckoutBooks(): Checkout2[] {
    console.log('hey hello');
    this.booksInCheckout1 = [];
    this.booksInCheckout2 = [];
    this.userID = +localStorage.getItem('id');
    this.userService.getUserById(this.userID).subscribe(user => {
        this.booksInCheckout1 = user.checkout;
        for (let i = 0; i < this.booksInCheckout1.length; i++) {
            this.bookService
                .getBook(this.booksInCheckout1[i].bookId)
                .subscribe(book => {
                    this.daysRemaining = Math.ceil(
                        Math.abs(
                            new Date(
                                this.booksInCheckout1[i].endDate
                            ).getTime() - this.today.getTime()
                        ) / this.ONEDAY
                    );
                    this.booksInCheckout2.push(
                        new Checkout2(
                            book,
                            new Date(
                                this.booksInCheckout1[i].startDate
                            ).getMonth() +
                                1 +
                                '/' +
                                new Date(
                                    this.booksInCheckout1[i].startDate
                                ).getDate() +
                                '/' +
                                new Date(
                                    this.booksInCheckout1[i].startDate
                                ).getFullYear(),
                            new Date(
                                this.booksInCheckout1[i].endDate
                            ).getMonth() +
                                1 +
                                '/' +
                                new Date(
                                    this.booksInCheckout1[i].endDate
                                ).getDate() +
                                '/' +
                                new Date(
                                    this.booksInCheckout1[i].endDate
                                ).getFullYear(),
                            this.booksInCheckout1[i].status,
                            this.daysRemaining
                        )
                    );
                });
        }
        console.log(this.booksInCheckout2.length);
    });

    return this.booksInCheckout2;
}

checkout.service.ts：

{{1}}

enter image description here

Answer 1

之所以发生这种情况，是因为您没有在等待服务。发生的情况是数据不是来自服务器，并且您正在控制台记录其值。

let fetchData=async (params:any)=>{
    this.booksInCheckout = await this.checkoutService.getCheckoutBooks();// getting array value service
    //other code here
}

async function fetchData( params:any)=>{
    this.booksInCheckout = await this.checkoutService.getCheckoutBooks();// getting array value service
    //other code here
}

为您的服务使用以下提到的函数实现之一。

//code for service 
 function getCheckoutBooks(){
return http.get();
}



async function getCheckoutBooks(){
const booksData : any = await http.get();

return booksData;
}

以下代码应该可以工作。

ngOnInit() {
   this.checkoutService.getCheckoutBooks().subscribe((booksInCheckout)=>{
    console.log(booksInCheckout); // for array
    console.log(booksInCheckout.length); // for length of array
    console.log(booksInCheckout[0]); // for first element

  });

}

由于您正在调用异步函数，所以您遇到了这个问题，但是由于javascript的异步特性，该函数下面的代码在异步任务完成之前就已执行。

所以在这里，我为异步任务添加了一个回调。希望对您有所帮助：）

Answer 2

原因是-因为您的方法this.checkoutService.getCheckoutBooks()本质上是异步的，并且您试图在实际获取数据之前进行控制台。

this.booksInCheckout = this.checkoutService.getCheckoutBooks();// Async Call

要解决此问题，请使用subscribe处理异步调用，也可以在getCheckoutBooks方法内使用控制台，也可以在模板端使用async。

Answer 3

您正在调用异步服务，它不等待您的响应。因此，您的下一条语句将首先执行。

因此，如果您使用的是ToPromise，则可以使用.then：

this.checkoutService.getCheckoutBooks().then(res=> { this.booksInCheckout = res; console.log(this.booksInCheckout)});

，或者您可以使用await来等待回复： this.booksInCheckout =等待this.checkoutService.getCheckoutBooks（）;

即使数组不为空，数组长度也显示为零

3 个答案: