CODEWITHSUNDEEP
angulartypescriptngfor
krishnapriya
krishnapriya

Reputation: 31

Get error: Cannot find a differ supporting object '[object Object]' of type 'object' NgFor only supports binding to Iterables, such as Arrays

I am working on the Angular application with Strapi, and I am not able to get the output from Strapi.

This is my HTML page for the application:

<h1>Tour Events</h1>
<table *ngIf="events$ ">
    <tr>
        <th>Date</th>
        <th>Venue</th>
        <th>City</th>
        <th>Time</th>
        <th>Tickets</th>
    </tr>
    <tr *ngFor="let event of events$">
        <td>{{event.date | date: 'fullDate'}}</td>
        <td>{{event.venue }}</td>
        <td>
            <span *ngIf="event.region">{{event.city | titlecase}}, {{event.region | uppercase}}              ({{event.country |
                uppercase}})</span>
            <span *ngIf="!event.region">{{event.city | titlecase}} ({{event.country | uppercase}})</span>
        </td>
        <td>{{event.date | date: 'shortTime'}}</td>
        <td><a href="{{event.ticketsLink}}">Tickets</a></td>
    </tr>
</table>

This is the ts file:

import { Component, OnInit } from '@angular/core';
import { TourEventsService } from 'src/app/core/services/tour-events.service';
@Component({
  selector: 'app-tour-events',
  templateUrl: './tour-events.component.html',
  styleUrls: ['./tour-events.component.css']
})
export class TourEventsComponent implements OnInit{
  events$: any;
  constructor(private eventService: TourEventsService) { }
  ngOnInit(){
    this.events$ = this.eventService.getEvents().subscribe(()=>this.events$);


  }

}

service.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { TourEvent } from '../models/tour-event';

@Injectable({
  providedIn: 'root'
})
export class TourEventsService {
  private eventsPath = 'api/tour-events';

  constructor(private http: HttpClient) { }

  getEvents(){
    return this.http.get<TourEvent[]>(environment.apiUrl+this.eventsPath);
  }
}

I tried to change the ngFor in the HTML file, but that is the error:

Cannot find a differ supporting object '[object Object]' of type 'object' NgFor only supports binding to Iterables, such as Arrays

I could not understand what was the error so I could not change anything. Can anyone help me?

Upvotes: 0

Views: 146

Answers (1)

Yong Shun
Yong Shun

Reputation: 51125

In Angular, a variable with the $ suffix represents an Observable. You should assign the Observable returned from eventService.getEvents method without the .subscribe event.

import { Observable } from 'rxjs';

events$: Observable<TourEvent[]>;

ngOnInit() {
  this.events$ = this.eventService.getEvents();
}

While you need the AsyncPipe in the view to subscribe to the events Observable.

<tr *ngFor="let event of events$ | async">
  ...
</tr>

Demo @ StackBlitz

Upvotes: 1

Related Questions