ฉันสามารถใช้อินเทอร์เฟซในองค์ประกอบ html ได้ แต่ไม่สามารถใช้ใน typescript

ฉันใช้ 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 ส่งคืน ฉันสามารถใช้ data.items ได้โดยไม่มีปัญหา แต่ถ้าฉันเขียนโค้ด data.item.volumeInfo โค้ดภาพแจ้งว่าข้อผิดพลาดนี้: ไม่มีคุณสมบัติ 'volumeinfo' ในประเภท 'Book []' แต่ฉันสามารถใช้งานได้โดยไม่มีปัญหาใน 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