I have a Service type script class as follows:
export class HomeApiService{
apiURL = 'http://localhost:8080/api';
constructor(private http: HttpClient) {}
getProfileData():Observable<HomeModelInterface[]>{
return this.http.get<HomeModelInterface[]>(this.apiURL+'/home');}
}
I have component class as follows:
export class HomeComponent implements OnInit {
public profileData: HomeModelInterface[] | undefined ;
constructor(private homeApiService:HomeApiService) { }
ngOnInit() {
this.homeApiService.getProfileData().subscribe(data=> {
this.profileData = data;
console.log(this.profileData);
});
}
I have html file as follows:
<div *ngFor="let profile of profileData">
<h1>{{profile.data}}</h1>
</div>
Here is the backend spring boot application controller:
@RequestMapping(value = "/api/home" , method = RequestMethod.GET, produces =
"application/json")
public Object getHome() {
ResponseHome response = new ResponseHome();
response.setData(new String[]{"Greetings from Spring Boot API home!",
HttpStatus.ACCEPTED.toString()});
return response;
}
Here is my ResponseHome java class:
public class ResponseHome {
private String data[];
private String errors[];
public String[] getData() {
return data;
}
public void setData(String[] data) {
this.data = data;
}
public String[] getErrors() {
return errors;
}
public void setErrors(String[] errors) {
this.errors = errors;
}
}
Here is my frontend model typescript class to parse that json to a model class:
export interface HomeModelInterface{
data: string[];
errors: string[];
}
When i run it chrome i see the following error: Cannot find a differ supporting object '[object Object]' of type 'object'
Can you please help?
Your data is an object not an array. In order to iterate, you should get the list that's in it. Try something like profileData.data in *ngFor.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.