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

【问题标题】：How to transfer data json (Google books API) with dialog如何使用对话框传输数据 json（Google 图书 API）
【发布时间】：2019-11-17 21:07:30
【问题描述】：

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

错误类型错误：无法读取未定义的属性“标题”

如何显示“项目”的内容？

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 }

result-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>

【问题讨论】：

标签： angular google-books

【解决方案1】：

this.booksById.items 是array 所以你需要通过 index

这样试试

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

【讨论】：