如何在 Angular 中使用 ngFor 和插值遍历数组值

Question

我的 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 有关，但不确定具体如何实施。

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

Answer 1

您可以像这样遍历您的技能数组：

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

</div>

您可以找到更多信息here

Answer 2

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

Answer 3

阅读文档以获取更多信息：https://angular.io/guide/displaying-data

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

Answer 4

您可以简单地使用 ngFor 来了解特定员工的技能。

像这样应该可以解决问题。

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

如何在 Angular 中使用 ngFor 和插值遍历数组值

How to loop through array values using ngFor and interpolation in Angular

angular

ngfor