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有关，但不确定如何实现。

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

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

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

类似的事情应该可以解决。

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

Answer 4

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

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

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

4 个答案: