Error: Cannot find a differ supporting object '[object Object]' of type 'Productionserver'. NgFor only supports binding to Iterables such as Arrays

1
votes
this.route.data.subscribe((data:Data)=>{
    this.servers = data['server'];

console.log(this.servers);
  
  });

The above code outputs like this to console

{id: 1, name: "Productionserver", status: "online"}

How to display this in view.

I tried like this but its not working

<div *ngFor="let server of servers">
{{server.id}}{{server.name}}{{server.status}}
</div>
1
angulartypescript

1 Answers

2
votes

Regarding the error message it means servers isn't an array so you can't iterate on it with *ngFor as it's an object. It isn't data about several server but about a single server.

You should change the wording from servers to server to avoid confusion (as stated into you sample : data['server].

Then just use your previous template sample without the *ngFor part :

{{server.id}}{{server.name}}{{server.status}}