I am currently utilizing Angular for my project.
I am attempting to call an API to fetch data from it, but I keep encountering this error:
core.js:4352 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
This is how my service is structured:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { User } from '../Models/user.model';
@Injectable({
providedIn: 'root'
})
export class DataService {
apiUrl = 'myurl is in here but i cannot show'
constructor(private _http: HttpClient) { }
getUsers(){
return this._http.get<User[]>(this.apiUrl);
}
}
Here is the user model:
export class User {
// User model properties here
}
This is how the TypeScript component utilizes it:
import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/Models/user.model';
import { DataService } from 'src/app/Services/data.service';
@Component({
selector: 'app-side-nav-alerts',
templateUrl: './side-nav-alerts.component.html',
styleUrls: ['./side-nav-alerts.component.css']
})
export class SideNavAlertsComponent implements OnInit {
users$: User[];
constructor( private dataService : DataService) { }
ngOnInit(){
return this.dataService.getUsers()
.subscribe(data => this.users$ = data)
}
}
Here is the HTML code:
<div *ngFor = 'let user of users$' style="text-align: center;">
<h2>{{user.name}}</h2>
</div>
Any suggestions on how I can properly loop over the data retrieved from the API? I am considering converting it to another data type but I'm unsure how to proceed with this.