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下：{{1} }，theoretical，expert），然后是数据。

我能够实现所有技能，但只有技能，这是一个内部表，虽然不能正确循环

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

}

这是您推荐的Sample StackBlitz。

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

1 个答案: