Angular *ngFor - 无法让我的数组循环答案

【问题标题】：Angular *ngFor - Cant get my Arrays to loopAngular *ngFor - 无法让我的数组循环
【发布时间】：2022-01-26 06:59:42
【问题描述】：

这不断出现错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays。但是当我尝试将其打印到控制台时它会起作用，任何帮助都将不胜感激

谢谢（：

//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>

【问题讨论】：

【解决方案1】：

错误已经提到了问题所在。

NgFor 只支持绑定到数组等 Iterables

您需要使用数组才能使*ngFor 起作用

//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>

【讨论】：

【解决方案2】：

我不知道我是否确定你想要完成什么，但绑定 i.Name 是不正确的，因为你将 Name 定义为一个数组。您可以使用 ngFor 遍历 profile.Name，然后绑定属性“name”。更改变量名称可能不会那么混乱：)

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

同样适用于年龄

【讨论】：

支持约翰尼！然而我喜欢这样做的原因是因为你可以拥有 HTML 显示：Lily 25 Jimmy 20 而不是 Lily Jimmy 20 25，谢谢 Johnny (: