Currently, I'm working on a MovieTicketBooking website using Angular and an asp.net web API. It got stuck at one point where I could not fix it. When I try to display movie details on the frontend, I get errors like this Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed. Please help me to solve it

book.component.html

<div >
    <div  *ngFor="let item of moviedata">
      <h5 >{{item.Title}}</h5>
      <p >{{item.Description}}</p>
      <!-- <button  (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 
  {
  }
}

Data on Console

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

CodePudding user response：

Maybe result wasn't type Movie[]. This might help to being your idea.

 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);
   })
 }

CodePudding user response：

Your moviedata is an object, not an array.

You should do like this.

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