Отображение значений из API на угловой странице 6

Question

Я совершенно новичок в Frontend Dev и пытаюсь отобразить данные API в приложении Angular 6 и не могу понять, как это сделать.

Я могу отображать значения на верхнем уровне возвращаемых данных, ноэто детали подуровня, с которыми я борюсь и не могу найти справку в Интернете.

Я использую приложение Angular 6, используя Routing.

Ниже приведен весь мой код

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.compoent.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;
    });
  }
}

В настоящее время это возвращает следующее

Что я хочу сделать, это отобразитьзначение из «eBook», которое находится под уровнем «saleInfo».Я знаю, что мне нужно изменить цикл для каждого array, возвращаемого в HTML, но это то, где я застрял

Также я не уверен, что код, который у меня есть, лучший, но он работает,Помощь очень ценится, так как я сказал, что я новичок во всем этом и могу получать значения с верхнего уровня, но не подуровни в API

Answer 1

Измените строку this.books = data; на this.books.push(data);

Так как, если это this.books = data; и потому что books имеет тип any.Он примет все.Итак, теперь после этой строки this.books = data; становится объектом, который содержит значение переменной data.Итак, вы должны использовать,

this.books.push(data);

, чтобы он тоже вел себя как массив.Затем вы можете получить доступ к books с помощью *ngFor.

Итак, теперь в 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>

Answer 2

Я бы порекомендовал лучше называть для вашего сервиса, Service.compoent.ts не идеально, api.service.ts гораздо понятнее.

Также вы можете видеть, что когда вы подписываетесь, вы используете data: {}, это означает, что функция должна ожидать значение типа Object, но я бы использовал any, так как вы используете Observable<any>

Теперь о проблеме.

Я создал stackblitz , который делает именно то, что вы хотели.Я думаю, что вы запутались с комментариями.Вы не хотите изменять let book of books.items на let book of books, потому что вы будете перебирать объект, что вы не можете сделать в *ngFor.