Encountering an error while attempting to fetch data from the API. See the error image here.
export class UserService {
baseurl: string = "https://jsonplaceholder.typicode.com/";
constructor(private http: HttpClient) { }
listUsers(){
//this.http.get(this.baseurl+ 'users').subscribe(responseData => console.log(responseData));
return this.http.get(this.baseurl + 'users');
}
}
list-users.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from 'src/app/services/user.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-list-users',
templateUrl: './list-users.component.html',
styleUrls: ['./list-users.component.css']
})
export class ListUsersComponent implements OnInit {
listUsers!: Observable<any>;
constructor(private userService: UserService){}
ngOnInit(): void {
this.listUsers=this.userService.listUsers();
}
list.users.component.html
<ul>
<li *ngFor="let user of listUsers">
{{ user.name }}
</li>
</ul>
Facing an error while trying to retrieve data via the API.