I encountered an issue with Angular not recognizing the 'data' property when fetching dummy data from an API. The error message I received was: Property 'data' does not exist on type 'Object'
After attempting to remove the 'data' property and utilize "let user of users" instead, I faced another error related to the usage of 'of': Type 'Object' is not assignable to type 'NgIterable | null | undefined'
Here's a snippet of my HTML component:
<h1>Home</h1>
<ul *ngIf="users">
<li value="user" *ngFor="let user of users.data">
<img [src]="user.avatar">
<p>{{ user.first_name }} {{ user.last_name }}</p>
</li>
</ul>
Below is the TypeScript component code:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
users: Object;
constructor(private data: DataService) {
}
ngOnInit() {
this.data.getUsers().subscribe(data => {
this.users = data
console.log(this.users)
})
}
}
And here is the corresponding DataService TypeScript component:
import { Injectable } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(public http: HttpClient) { }
getUsers() {
return this.http.get('https://reqres.in/api/users')
}
}