Search code examples
javascripthtmlarraysangularngfor

Angular *ngFor - Cant get my Arrays to loop


This keeps kicking upError: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. But it works when I try print it to the console, any help be appreciated big time guys

Thank you (:

//TypeScript File :
public names = ["Jimmy" , "Lilly"];
  public ages = [20,25];
  public profile = {
    Name : this.names,
    Age : this.ages
  }

//HTML File :
<div *ngFor = "let i of profile">
    {{i.Name}}
    {{i.Age}}
</div>

Solution

  • The error already mentions what's the issue.

    NgFor only supports binding to Iterables such as Arrays

    You need to use an array in order that *ngFor works

    //TypeScript File
    public jimmy = { Name: "Jimmy", Age: 20 };
    public lilly = { Name: "Lilly", Age: 25 };
    public profiles = [jimmy, lilly]
    
    //HTML File :
    <div *ngFor = "let i of profiles">
        {{i.Name}}
        {{i.Age}}
    </div>