我可以在 html 组件中使用接口，但不能在打字稿中使用

Question

我正在 Angular 中使用 Google 本书 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
   }

这是我的打字稿组件


    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 return 的对象，我可以使用 data.items 没有问题，但是如果我写 data.item.volumeInfo 视觉代码会出现此错误：属性 'volumeinfo' 在类型 'Book[]' 上不存在，但我可以在 html 中毫无问题地使用，我不知道如何解决这个问题？

有人可以告诉我问题是什么或我的错误吗？

Answer 1

问题 #1 - ”但是如果我写 data.item.volumeInfo 视觉代码会说这个错误：属性 'volumeinfo' 在类型 'Book[]' 上不存在”

那是因为您正试图直接在 Books
的 array 中访问 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让我们获取该数组下所有属性的实例

我可以在 html 组件中使用接口，但不能在打字稿中使用

I can use an interface in the html component but not in the typescript

html

api

interface

typescript

angular