如何在 Angular 中使用 ngFor 和插值循环遍历数组值答案

【问题标题】：How to loop through array values using ngFor and interpolation in Angular如何在 Angular 中使用 ngFor 和插值循环遍历数组值
【发布时间】：2019-11-02 23:55:21
【问题描述】：

我的 Angular 应用程序中的 Employee 对象包含一组 Skill 对象，如下所示：

export interface IEmployee {
    id: number;
    fullName: string;
    skills: ISkill[];
}

这是我的Skill interface：

export interface ISkill {
    skillName: string;
    experienceInYears: number;
    proficiency: string;
}

我可以使用插值来显示员工详细信息，如下所示：

{{employee.fullName}}

现在，我正在尝试展示员工的技能。

下面，我可以显示第一个skill：

{{employee.skills[0]?.skillName}}

但我想展示与该员工相关的所有技能，而不仅仅是第一个。

我认为解决方案可能与ngFor 有关，但不确定具体如何实施。

谁能告诉我如何循环遍历技能数组以显示上述代码中的所有技能名称？

【问题讨论】：

标签： angular ngfor

【解决方案1】：

您可以简单地将ngFor 用于特定员工的技能。

这样的事情应该可以解决问题。

<div *ngFor="let skill of employee.skills">
  {{skill.skillName}}
</div>

【讨论】：

【解决方案2】：

你可以像这样循环你的技能数组：

<div *ngFor="let skill of employee.skills" >
   <span>{{skill.skillName}}</span>
   <span>{{skill.experienceInYears}}</span>
   <span>{{skill.proficiency}}</span>

</div>

您可以找到更多信息here

【讨论】：

【解决方案3】：

<div *ngFor="let skill of employee.skills">
    <div>{{ skill.skillName }}</div>
    <div>{{ skill.proficiency }}</div>
    <div>{{ skill.experienceInYears }}</div>
</div>

【讨论】：

【解决方案4】：

阅读文档了解更多信息：https://angular.io/guide/displaying-data

<div *ngFor="let skill of employee.skills">
      {{ skill.name }}
    </div>

【讨论】：