在数组中循环以获取角度所需的数据答案

【问题标题】：Looping with in an array to get required data in angular在数组中循环以获取角度所需的数据
【发布时间】：2018-10-13 10:05:54
【问题描述】：

我有一个如下所述的 JSON：

[{
  "_id": 1,
  "Name": "x",
  "Email": "z@epsilon.com ",
  "Designation": "Manager",
  "Project": "x",
  "Skills": [{
      "Technology": "Big Data- Hadoop, Hive, HDFS",
      "Level": "Theoretical",
      "TotalExperience": ""
    },
    {
      "Technology": "Oracle PL/SQL",
      "Level": "Intermediate",
      "TotalExperience": ""
    },
    {
      "Technology": "Informatica PowerExchange 8.x",
      "Level": "Intermediate",
      "TotalExperience": ""
    },
    {
      "Technology": "IBM Datastage 7.5",
      "Level": "Beginer",
      "TotalExperience": ""
    },
    {
      "Technology": "MS Word",
      "Level": "Expert",
      "TotalExperience": ""
    },
    {
      "Technology": "USnit testing",
      "Level": "Expert",
      "TotalExperience": ""
    }
  ]
}];

我想以表格格式将其显示为 Name、Project、Designation、Skills（在 skills 下：theoretical、expert、intermediate），然后数据。

我能够获得所有技能，但只有内表无法正确循环

【问题讨论】：

请告诉我们您的尝试，我们可以指出如何解决它
您是否有一个屏幕截图，说明在您当前的实施到位的情况下它的外观以及现在的外观？另外，请尽可能添加您的实现。
分享您的 Angular 打字稿和服务代码。
我正在做 *ngFor="let employee of employees ; 让 rowIndex = 表体中的索引，它是父级，下面的代码是技能列，它又是一个表 {{skill.Technology}}
我现在正在获取员工对象并显示在 UI 中，因此尝试仅从员工对象中提取

标签： json angular angular6

【解决方案1】：

在这里，试试这个：

模板：

<table border="1">
  <thead>
    <td>Name</td>
    <td>Project</td>
    <td>Designation</td>
    <td>Skills</td>
  </thead>
  <tbody>
    <tr *ngFor="let datum of data">
      <td>{{ datum.Name }}</td>
      <td>{{ datum.Project }}</td>
      <td>{{ datum.Designation }}</td>
      <table border="1">
        <thead>
          <td>Theoritical</td>
          <td>Beginer</td>
          <td>Intermediate</td>
          <td>Expert</td>
        </thead>
        <tbody>
          <tr>
            <td>{{ filterSkillBy(datum.Skills, 'Theoretical') }}</td>
            <td>{{ filterSkillBy(datum.Skills, 'Beginer') }}</td>
            <td>{{ filterSkillBy(datum.Skills, 'Intermediate') }}</td>
            <td>{{ filterSkillBy(datum.Skills, 'Expert') }}</td>
          </tr>
        </tbody>
      </table>
    </tr>
  </tbody>
</table>

组件：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  data = [...];

  filterSkillBy(skills: any[], by) {
    return skills.filter(skill => skill.Level === by).map(skill => skill.Technology).toString();
  }

}

这里有一个Sample StackBlitz 供您参考。

【讨论】：

它工作正常，但我想将链接应用到所有技能上.请指导任何解决方案。