如何使用对话框传输数据 json（Google 本书 API）

Question

我已经在对话框中传输了 Google 本书 API 的数据，它似乎可以工作，但是当我尝试显示数据时，它变得复杂了。如果我尝试显示元素 "kind" 或 "totalItems"，它会正确显示，但如果我尝试显示 "items.something"，它就不起作用。

ERROR TypeError: Cannot read property 'title' of undefined

如何显示"items"的内容？

API: https://www.googleapis.com/books/v1/volumes?q=CFk5vep5XWwC

result.component.ts

openDialog(id): void {
    this.apiService.getBooks(id).subscribe((data: {}) => {
        this.booksById = data;
        const dialogRef = this.dialog.open(ResultDialogComponent, {
            width: '500px',
            data: { title: this.booksById.items.volumeInfo.title }
        });

        dialogRef.afterClosed().subscribe(result => {
            console.log('Dialog closed');
        });
    });
}

如果我用这个，它就有效！我不明白为什么我无法访问项目

data: { title: this.booksById.kind }

结果-dialog.component.html

<div>
    <h1 mat-dialog-title>Title: {{data.title}}</h1>
    <div mat-dialog-actions>
        <button mat-button (click)="onClick()">Close</button>
    </div>
</div>

Answer 1

this.booksById.items is the array so you need to access it by index

这样试试

data: { title: this.booksById.items[0].volumeInfo.title }

如何使用对话框传输数据 json（Google 本书 API）

How to transfer data json (Google books API) with dialog

google-books

angular