When attempting to iterate through data fetched via an API, I encountered the following error message:
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Below is my component code where the looping is attempted (main.component.html):
<app-editform [toDo$]="todo" *ngFor="let todo of cs.$todos"></app-editform>Here is the constructor section from main.component.ts:
import {ConfigService} from '../service/config.service';
constructor(public cs : ConfigService) {
}
And this is the contents of my config.service.ts file:
import {TodoService} from './todo.service';
import { Observable } from 'rxjs';
export class ConfigService {
public $todos: Observable<TodoService[]>;
constructor(private http:HttpClient) {
this.getGlobalData();
}
public getGlobalData(): void {
this.$todos = this.getToDoData();
}
public getToDoData(): Observable<TodoService[]> {
return this.http.get<TodoService[]>(`${this.url}`);
}
}