Я могу использовать интерфейс в компоненте html, но не в машинописном тексте.

Я использую API Google Книг в Angular. По этой причине я создал следующий интерфейс


    export interface DateBooks {
    kind:string,
    totalItems:number,
    items:Book[]
   }
   export interface Book {
   kind:string,
   id:string,
   etag:string,
   selfLink:string,
   volumeInfo: VolumeInfo[],
   saleInfo:SaleInfo,
   accessInfo:AccessInfo,
   searchInfo:SearchInfo
   }
   export interface VolumeInfo {
   title:string,
   subtitle:string,
   authors:string[],
   publisher:string,
   publisedDate:string,
   description:string,
   industryIdentifiers:IndustryIdentifiers[],
   readingModes:ReadingModes,
   pageCount:number,
   printType:string,
   categories:string[],
   maturityRating:string,
   allowAnonLogging:boolean,
   contentVersion:string,
   panelizationSummary:PanelizationSummary,
   averageRating:number,
   ratingCount:number,
   imageLinks:ImageLinks,
   language:string,
   previewLink:string,
   infoLink:string,
   canonicalVolumeLink:string
   }
   
   export interface ImageLinks {
   smallThumbnail:string,
   thumbnail:string
   }
   
   
   export interface IndustryIdentifiers{
       type:string,
       identifier:string
   }
   
   export interface ReadingModes{
       text:boolean,
       image:boolean
   }
   
   export interface PanelizationSummary{
       containsEpubBubbles:boolean,
       containsImageBubbles:boolean
   }
   
   export interface SaleInfo{
       country:string,
       saleability:string,
       isEbook:boolean
   }
   
   export interface AccessInfo{
       country:string,
       viewability:string,
       embeddable:boolean,
       publicDomain:boolean,
       textToSpeechPermission:string,
       epub:Epub,
       pdf:Pdf,
       webReaderLink:string,
       accessViewStatus:string,
       quoteSharingAllowed:boolean
   }
   
   export interface SearchInfo{
       textSnippet:string
   }
   
   export interface Epub{
       isAvailable:boolean
   }
   
   export interface Pdf{
       isAvailable:boolean
   }

Это мой компонент машинописного текста


    databooks:DateBooks;
    books:Book[];
    title:string;
    constructor(private GoodreadsService:GoodreadsService) { }
    
      ngOnInit(): void {
      }
    
    getLibros(libro:string){
      this.GoodreadsService.getBooks(libro).subscribe(data=>{
        this.databooks=data;
        this.books=this.databooks.items;
      })
    
        }

Это метод getBooks


public getBooks(busqueda:string): Observable<DateBooks>{
    return this.http.get<DateBooks>(`https://www.googleapis.com/books/v1/volumes?q=${busqueda}&maxResults=40`);

И это компонент html


    <input type="text" id="namea" name="nameb" required
        minlength="4" maxlength="8" size="10" placeholder="introduzca texto" [(ngModel)]="title" (keyup)="getLibros(title) " >
        <div *ngFor="let book of books">
          <h4 class="prueba">
              <p> {{book.volumeInfo['title']}}</p>
       <p><img src={{book.volumeInfo.imageLinks.thumbnail}}></p>
          </h4>    
        </div>

Итак, я могу без проблем использовать интерфейс в html, кроме того, если я запускаю и пишу что-нибудь во входных данных, страница показывает правильно названия книг и обложки. Однако я не могу получить только несколько свойств интерфейса на ts. Например, в данных подписки есть объект, который возвращает getBooks, я могу без проблем использовать data.items, но если я напишу data.item.volumeInfo, визуальный код скажет эту ошибку: свойство «volumeinfo» не существует для типа «книга». []', но я могу без проблем использовать в html, я не знаю, как я могу решить эту проблему?.

Может ли кто-нибудь сказать мне, в чем проблема или моя ошибка?


typescript angular api html interface
person Listopia    schedule 05.12.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Проблема №1 — но если я пишу data.item.volumeInfo, визуальный код выдает эту ошибку: свойство 'volumeinfo' не существует для типа 'Book[]'

  • Это потому, что вы пытаетесь получить доступ к object property непосредственно внутри массива книг.

  • Пример:

// Mock Data
const books: Books[] = [ 
   { name: 'Book 1', volumeInfo: '123' }, 
   { name: 'Book 2', volumeInfo: '457' } 
];

// This is what you are trying to do which will produce an error
// Directly accessing a property inside an array which is invalid since we are not accessing
// a mere object but we are accessing an array of object
books.volumeInfo

// What we must do to access them is through:
books[0].volumeInfo

// or through using .map, .filter, .forEach and other similar to iterate the array and access the properties inside
books.map(book => console.log(book))
books.forEach(book => console.log(book));

Проблема №2 — но я могу без проблем использовать в HTML

  • Это потому, что вы перебрали массив через *ngFor="let book of books" точно так же, как мы можем перебрать .map, .filter, and .forEach массив объектов.

  • Похожий на:

books.forEach(book => console.log(book.volumeInfo));        // 123
                                                            // 457

В заключение, если мы хотим получить доступ к массиву объектов, используйте .map, .filter, .forEach or other similar для нас, чтобы получить экземпляр для всех свойств в этом массиве.

person KShewengger    schedule 06.12.2020
comment
Ваше объяснение было ясным, вы очень милы, спасибо :) - person Listopia; 06.12.2020
comment
без проблем, большое спасибо :) - person KShewengger; 06.12.2020