Angular *ngFor - Cant get my Arrays to loop-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

I don't know if I'm sure about what you're trying to accomplish, but binding i.Name is incorrect since you defined Name as an array. You could loop over profile.Name using ngFor and then bind the property "name". Changing variable names could be less confusing:)

<div *ngFor="let i of profile.Name">
{{i.name}}
</div>

Same is applicable for Age