我可以在 html 組件中使用接口，但不能在 typescript 中使用

Question

我在 Angular 中使用 Google Books Api。 出於這個原因，我創建了以下界面

    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
   }

這是我的 typescript 組件

    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返回的object，我可以使用data.items沒有問題，但是如果我寫data.item.volumeInfo可視化代碼說這個錯誤：Property 'volumeinfo' does not exist on type 'Book []'，但我可以在 html 中毫無問題地使用，我不知道如何解決這個問題？

有人可以告訴我是什么問題或我的錯誤嗎？

Answer 1

關注#1 - “但是如果我寫 data.item.volumeInfo 可視代碼說這個錯誤：屬性 'volumeinfo' 在類型 'Book[]' 上不存在”

• 那是因為您試圖直接在 Books數組中訪問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方法來獲取該數組下所有屬性的實例