Цикл в массиве, чтобы получить необходимые данные в угловых

Question

У меня есть 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) и затем данные.

Я могу достичь всех, кроме только тех навыков, которые являются внутренней таблицей, я не могу зациклить, хотя правильно

Answer 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();
  }

}

Вот Образец StackBlitz для вашей ссылки.