时间戳

首页 > 解决方案 > 尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象。如何显示json响应

angular - 尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象。如何显示json响应

问题描述

我正在尝试显示 JSON 响应，但出现此错误：core.js:6185 ERROR 错误：尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象。

错误图像

我该如何解决这个问题？如何将其转换为数组？

TS

export interface Book {
  id: number,
  book_name: string,
  book_issue: Date,

}

服务.ts

export class BookApiService {
  private bookUrl  = "http://127.0.0.1:5000/books"
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }
    constructor (private http: HttpClient){}

    getBook(): Observable<Book[]> {
      return this.http.get<Book[]>(this.bookUrl ,this.httpOptions)
      .pipe(
        catchError(this.errorHandler)
      )
      }
  
  errorHandler(error) {
    let errorMessage = '';
    if(error.error instanceof ErrorEvent) {
      errorMessage = error.error.message;
    } else {
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    return throwError(errorMessage);
 }

模板

<ul *ngFor="let book of books">
    <li>{{book.book_name}}</li>
</ul>

零件

export class AppComponent implements OnInit {
  title = 'app';
  books: Book[] = [];

  constructor(public rs : BookApiService){}

  ngOnInit(): void {
    this.rs.getBook().subscribe((data: Book[])=>{
      this.books = data;
      console.log(this.books);
    })  
  }

后端 API 响应：

{"books":[{"book_issue":"Fri, 13 Mar 2020","book_name":"Book1","id":1},
{"book_issue":"Fri, 13 Mar","book_name":"Book2",                                                                                                                                                                                                "id":2}],
"success":true}

这是控制台日志： 控制台日志

标签： angulartypescriptapifrontend

解决方案

更新您的代码如下：

<ul *ngFor="let book of books?.books">
    <li>{{book.book_name}}</li>
</ul>

从您的 API 返回的响应是 anobject并且您将其分配给 in 中使用的变量，该变量ngFor需要一个数组。所以它的抛出错误。

解决此问题的另一种方法是将变量分配如下：

this.rs.getBook().subscribe((data: any)=>{
      this.books = data.books;
      console.log(this.books);
    })

然后在您的html使用中如下所示：

<ul *ngFor="let book of books">
    <li>{{book.book_name}}</li>
</ul>

推荐阅读