如何在 angular 中从服务器检索数据

Question

我正在尝试使用 angular 和 Nestjs 构建我的第一个 Web 应用程序。当我尝试从服务器获取数据时，浏览器控制台中显示错误。请提供任何帮助。

core.js:4081 ERROR TypeError: this.books is not iterable
    at SafeSubscriber._next (book.service.ts:23)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at MapSubscriber._next (map.js:35)
    at MapSubscriber.next (Subscriber.js:49)
    at FilterSubscriber._next (filter.js:33)
    at FilterSubscriber.next (Subscriber.js:49)
    at MergeMapSubscriber.notifyNext (mergeMap.js:72)

angular

book.service.ts

 import { Book } from './book.model';
import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class BookService {
  private books: Book[] = [];
  private booksUpdated = new Subject<Book[]>();

 
  constructor(private http: HttpClient) {
   }


  getBooks(){
    this.http.get<{books:Book[]} >('http://localhost:3000/books')
    .subscribe((bookData) =>{
      this.books = bookData.books;
      this.booksUpdated.next([...this.books]);
    });
  }

  getBookUpdateListener(){
    return this.booksUpdated.asObservable();
  }

  addBook( book_name: string, author: string){
    const book: Book = {book_ref_no: null, book_name: book_name, author: author, category: null};
    this.books.push(book);
    this.booksUpdated.next([...this.books]);
  }

  
}

来自服务器的响应

[{"book_ref_no":4,"book_name":"ice and fire","author":"jrr martine","category":"HISTORY"}]

谁能帮我解决这个问题。请告诉我提供的数据不足以找出解决方案，

Answer 1

欢迎使用 Angular 和 NestJS。

您的后端控制器的响应似乎是：

[
 { book 1...},
 { book 2...},
 ...
]

因此，您只需将 HttpClient.get 回复键入 Book[]。

getBooks(){
  this.http.get<Book[]>('http://localhost:3000/books').subscribe(books => {
      this.books = books;
      this.booksUpdated.next(books);
    });
  }

如何在 angular 中从服务器检索数据

how to retrieve data form the server in angular

angular

nestjs

angular-fullstack

rest