Question

错误：NG0900：尝试比较“[object Object]”时出错。仅允许数组和可迭代对象

2022-05-24

5444

angular angularjs

目前，我正在使用 Angular 和 asp.net web API 开发 MovieTicketBooking 网站。它卡在了某个地方，我无法修复它。当我尝试在前端显示电影详细信息时，我收到如下错误 Error: NG0900: 尝试比较“[object Object]”时出错。仅允许数组和可迭代对象 。请帮我解决它

book.component.html

<div class="card">
    <div class="card-body" *ngFor="let item of moviedata">
      <h5 class="card-title">{{item.Title}}</h5>
      <p class="card-text">{{item.Description}}</p>
      <!-- <button class="btn btn-primary" (click)="getAllMovieById(item.id)">Book</button> -->
    </div>
</div>

book.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { Movie } from 'src/app/Models/Movie';
import { MovieService } from 'src/app/shared/movie.service';

@Component({
  selector: 'app-book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.css']
})
export class BookComponent implements OnInit {
  moviedata: Movie[] = [];

  constructor(private route : ActivatedRoute , private formBuilder : FormBuilder, private _http:HttpClient, private router: Router, private movieservice : MovieService) { 

    this.movieservice.getMovieById(this.route.snapshot.params['id']).subscribe((result:any)=>{
      this.moviedata = result;
      console.log(this.moviedata);
    })
  }

  ngOnInit(): void 
  {
  }
}

控制台上的数据

autoOffSet: null
createdBy: 0
creationDate: "0001-01-01T00:00:00+00:00"
description: "qwerty"
entityState: 0
fare: 123
id: 1
imgPath: null
modifiedBy: null
modifiedDate: null
rowVersion: null
shows: Array(1)
0: {ticket: 12, showTime: '2022-05-23T13:09:00', showDate: '2022-05-23T00:00:00', movieId: 1, movie: {…}, …}
length: 1
[[Prototype]]: Array(0)
title: "Doctor Strange"
[[Prototype]]: Object

Answer 1

您的 moviedata 是一个对象，而不是一个数组。

您应该这样做。

<div class="card">
    <div class="card-body" >
      <h5 class="card-title">{{moviedata.title}}</h5>
      <p class="card-text">{{moviedata.description}}</p>
      <!-- <button class="btn btn-primary" (click)="getAllMovieById(item.id)">Book</button> -->
    </div>
</div>

Answer 2

this.moviedata = result;

result 不是对象；您应该解析它以获取对象：

this.moviedata = JSON.parse(result);

Answer 3

也许 result 不是 Movie[] 类型。这可能有助于实现您的想法。

 constructor(private route : ActivatedRoute , private formBuilder : FormBuilder, private _http:HttpClient, private router: Router, private movieservice : MovieService) {
   this.movieservice.getMovieById(this.route.snapshot.params['id']).subscribe((result:any)=>{
     console.log('result', result);
     this.moviedata = result.shows;
     console.log(this.moviedata);
   })
 }