Saya dapat menggunakan antarmuka di komponen html tetapi tidak di skrip ketikan

Saya menggunakan Google Books Api di Angular. Untuk alasan itu saya membuat antarmuka berikut


    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
   }

Ini adalah komponen skrip saya


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

Ini, metode getBooks


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

Dan, ini komponen 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>

Jadi, saya dapat menggunakan antarmuka tanpa masalah dalam html, selain itu jika saya menjalankan dan menulis apa pun di input, halaman akan menampilkan judul buku dan sampul dengan benar. Namun, saya tidak bisa mendapatkan hanya beberapa properti antarmuka di ts. Misalnya, dalam data berlangganan adalah objek yang dikembalikan getBooks, saya dapat menggunakan data.items tanpa masalah, tetapi jika saya menulis data.item.volumeInfo Kode visual mengatakan kesalahan ini: Properti 'volumeinfo' tidak ada pada tipe 'Buku []', tapi saya dapat menggunakannya tanpa masalah di html, saya tidak tahu bagaimana cara memperbaiki masalah ini?.

Bisakah seseorang memberi tahu saya apa masalahnya atau kesalahan saya?


typescript angular api html interface
person Listopia    schedule 05.12.2020    source sumber

Jawaban (1)


arrow_upward
3
arrow_downward

Masalah #1 - tetapi jika saya menulis kode visual data.item.volumeInfo, katakan kesalahan ini: Properti 'volumeinfo' tidak ada pada jenis 'Buku[]'

  • Itu karena Anda mencoba mengakses object property secara langsung di dalam array Buku

  • Contoh:

// 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));

Permasalahan #2 - tetapi saya dapat menggunakannya tanpa masalah di html

  • Itu karena Anda telah mengulangi array melalui *ngFor="let book of books" sama seperti bagaimana kita dapat melakukan iterasi melalui .map, .filter, and .forEach array objek

  • Mirip dengan:

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

Singkatnya, jika kita ingin mengakses array objek, gunakan .map, .filter, .forEach or other similar agar kita bisa mendapatkan instance ke semua properti di bawah array itu

person KShewengger    schedule 06.12.2020
comment
penjelasan anda sudah jelas, anda sangat baik terima kasih :) - person Listopia; 06.12.2020
comment
tidak masalah, terima kasih banyak :) - person KShewengger; 06.12.2020