显示来自 API In Angular 6 页的值

Question

我是前端开发的新手，正在尝试在 Angular 6 应用程序中显示 API 数据，但不知道该怎么做。

我可以在 returned 详细信息的顶层显示值，但这是我正在努力处理的子级别详细信息。

我正在使用 Angular 6 使用路由的应用程序。

下面是我的全部代码

Homepage.component.html

<h2>Book ID List</h2>

<button (click)="getBooks()">Get</button>

<div *ngFor="let book of books.items">
  <p>ID: {{book.id}}</p>
</div>

我可以得到 'ID'

我正在使用 service 从测试中获取数据 API

Service.component.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class ApiServiceService {
  url = 'https://www.googleapis.com/books/v1/volumes?q=HTML5  Wire-frames';

  constructor(private http: HttpClient) { }

  private extractData(res: Response) {
    const body = res;
    return body || {};
  }

  getBooks(): Observable<any> {
    return this.http.get(this.url).pipe(
      map(this.extractData));
  }
}

Homepage.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiServiceService } from '../../services/api-service.service';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
  books: any = [];

  constructor(private apiService: ApiServiceService) { }

  ngOnInit() { }

  getBooks() {
    this.books = [];
    this.apiService.getBooks().subscribe((data: {}) => {
      console.log(data);
      this.books = data;
    });
  }
}

目前这个return以下：

我想做的是显示 'eBook' 中 'saleInfo' 级别下的值。我知道我需要为 HTML 中的每个 array return 更改循环，但这就是我卡住的地方。

此外，我不确定我拥有的代码是否最好，但它可以正常工作。正如我所说，我是这一切的新手，可以从顶层提取值，但不能从 API.

中的子层提取值

Answer 1

我会建议为您的服务更好地命名，Service.compoent.ts 不理想，api.service.ts 更容易理解。

您还可以看到，当您订阅时，您使用的是 data: {}，这意味着该函数应该期望类型为 Object 的值，但我会使用 any，因为你使用 Observable<any>

现在正题

我创建了 stackblitz，它可以满足您的需求。我认为您对这些评论感到困惑。您不想将 let book of books.items 更改为 let book of books，因为您将遍历对象，而这在 *ngFor 中是做不到的。

Answer 2

将行 this.books = data; 更改为 this.books.push(data);

因为，如果它是 this.books = data; 并且因为 books 是 any 类型。它会接受任何东西。所以，现在在这一行之后，this.books = data; 它变成了包含 data 变量值的对象。所以，你应该使用，

this.books.push(data);

让它的行为也像一个数组。然后，您可以使用 *ngFor.

访问 books

所以，现在在 HTML 您可以通过 *ngFor 访问：

<div *ngFor="let book of books">
  <div *ngFor="let items of book.items">
    <p>ID: {{items.id}}</p>
    <p>ebook: {{items.saleInfo.isEbook}}</p>
  </div>
</div>

显示来自 API In Angular 6 页的值

Display values from API In Angular 6 page

arrays

angular-services

angular-components

angular

angular7