Is there is any possibilty for binding array in angular - arrays

Question

Service module:
baseurl: string = 'https://fireman-7cc06-default-rtdb.firebaseio.com/'
getFunction(): Observable<object> {
return this.http.get(this.baseurl + 'items.json')
}
Component module:
ngOnInit(): void {
this.itemservices.getFunction().subscribe(data => {
this.listItems= data
console.log(this.listItems)
}, err => {
console.log('error' + err)
})
}
View:
<div *ngIf="listItems">
<ul *ngFor="let info of listItems">
<li>{{info.Item_name}}</li>
</ul>
</div>

Answer 1

As the error indicates *ngFor could only loop through iterables like an array. However your API returns an object. Ideally any data conversions must be done in the backend. However, if you so desire, you have the following options in the frontend.
Option 1: convert object to array
You could use JS Object.values() with RxJS map operator to fetch the values of the object as an array.
const input = {"-MhJ49AIHh-53nnF07a1":{"Item_color":"white","Item_name":"amma","Item_price":"369","Item_type":"human"},"-MhJXlVgPBdZ6Q7L0Tnn":{"Item_color":"red","Item_name":"manu","Item_price":"1000","Item_type":"sunny"},"-MhJa9Xzmdq9OvkZyVN7":{"Item_color":"yellow","Item_name":"chinnu","Item_price":"500000","Item_type":"sunny"}}
console.log(Object.values(input))
.as-console-wrapper { max-height: 100% !important; top: 0; }
import { map } from 'rxjs/operators';
baseurl: string = 'https://fireman-7cc06-default-rtdb.firebaseio.com/'
getFunction(): Observable<object> {
return this.http.get(this.baseurl + 'items.json').pipe(
map((res: any) => Object.values(res))
);
}
Option 2: use Angular keyvalue pipe
You could skip the conversion in using Object.values() and use the keyvalue pipe in component template to iterate through an object.
Service
baseurl: string = 'https://fireman-7cc06-default-rtdb.firebaseio.com/'
getFunction(): Observable<object> {
return this.http.get(this.baseurl + 'items.json')
}
Template (*.html)
<div *ngIf="listItems">
<ul *ngFor="let info of listItems | keyvalue">
<li>{{info?.value?.Item_name}}</li>
</ul>
</div>

Answer 2

The problem here is you are trying to loop through an object instead of array. Please check how you define this.listItems.
Declare it as array and assign the values accordingly. Then you should be able to loop through in html code.
listItems = [];