API книг Google возвращает ОШИБКУ TypeError: Невозможно прочитать свойство 'thumbnail' из undefined Angular 8 - PullRequest
Новая
       4

API книг Google возвращает ОШИБКУ TypeError: Невозможно прочитать свойство 'thumbnail' из undefined Angular 8

0 голосов
/ 05 февраля 2020

Я делаю простое angular веб-приложение, в котором пользователь может искать книги и возвращать разные книги.

В основном это работает нормально, но для некоторых названий, таких как "neena", возвращается TypeError: Cannot читать свойство 'thumbnail' из неопределенного

Я просмотрел http-ответ на консоли и выяснил, есть ли у некоторых книг books.volumeInfo.imageLinks, item.volumeInfo.imageLinks.thumbnail отсутствуют

Я видел это решение здесь API Google books возвращает отсутствующие параметры , но не знаю, как использовать его в моем приложении.

service.ts 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Observable} from 'rxjs';
import 'rxjs/Rx';


@Injectable({
  providedIn: 'root'
})
export class GoogleapiService {

  API_KEY = 'AIzaSyDHDCI5JYsbDRGRa5nx252a0kv43XwCpvE';

  constructor(private httpClient: HttpClient) { }

  getNews(searchText):Observable<any>{
    const encodedURI = encodeURI("https://www.googleapis.com/books/v1/volumes?q="+searchText+"&maxResults=12&key=");
    return this.httpClient.get(encodedURI);
  } 
}

component.ts 

import { Component, OnInit } from '@angular/core';
import {GoogleapiService} from '../services/googleapi.service';
import { NgForm } from '@angular/forms';
import {Books} from '../booksearch/books';


@Component({
  selector: 'app-booksearch',
  templateUrl: './booksearch.component.html',
  styleUrls: ['./booksearch.component.css']
})
export class BooksearchComponent implements OnInit {
  items;
  searchText;
  constructor(private googleapiservice: GoogleapiService) { }
  ngOnInit() { 
  }

  onSubmit(form:NgForm){
   this.searchText = form.value.searchVariable;
    this.googleapiservice.getNews(form.value.searchVariable).subscribe((data)=>{
      this.items = data['items'];
      console.log(data);

      //console.log("test");
      //console.log(this.items[1].volumeInfo.imageLinks.thumbnail);
      //console.log(form.value.searchVariable);
    });

  }  

}

компонент. html

<h1>BOOKS</h1>

<div class="container">
    <h1>search your books</h1>
    <form #searchForm="ngForm" (ngSubmit)="onSubmit(searchForm)">
        <div class="form-group">
            <input type="text" class="form-control mt-10" name="searchVariable" placeholder="search for books" autocomplete="off" ngModel/>
        </div>
            <button type="submit" class="btn btn-danger"> Search</button>
    </form>
</div>   
<div *ngFor="let item of items">
    <h2>{{item?.volumeInfo.title}}</h2>
    <p>{{item?.volumeInfo.authors}}</p>
    <p>{{item?.volumeInfo.description}}</p>
    <p>{{item.volumeInfo.imageLinks?.thumbnail}}</p>
    <img src={{item.volumeInfo.imageLinks.thumbnail}} alt="Smiley face" height="42" width="42">

</div>

Я новичок в angular 8, и я не знаю, как и где использовать const paidBooks = apiResponse.data.filter (book => book.listPrice) согласно решению

Пожалуйста, кто-нибудь, помогите мне

спасибо

1 Ответ

0 голосов
/ 05 февраля 2020

Проблема в компоненте. html Строка, где у вас есть {{item.volumeInfo.imageLinks.thumbnail}} imageLinks, не определено, и вы не можете получить эскиз не определено. Вы должны проверить, если item.volumeInfo.imageLinks! = не определено, прежде чем получить миниатюру.

...