ngFor 用于复杂的 json

Question

我有以下 JSON 数据，在 Angular 7 中使用 *ngFor 需要以表格格式显示数据。

 <table class="table">
<tbody>
    <tr>
      <th></th>
        <td>java</td>
        <td>.Net</td>
        <td>Integration</td>
    </tr>
    <tr>
      <th>A1</th>
        <td>20</td>
        <td>30</td>
        <td>30</td>
    </tr>
     <tr>
      <th>B1</th>
        <td>100</td>
        <td>300</td>
        <td>200</td>
    </tr>
   <tr>
      <th>c1</th>
        <td>200</td>
        <td>300</td>
        <td>309</td>
    </tr>
</tbody>

这是 JSON

[
   {
       "grade":"A1",
       "data":{
        ".Net" :"6",
        "Java":"7",
        "Integration":"7"
     }

},
{
    "grade":"B1",
       "data":{
        ".Net" :"12",
        "Java":"70",
        "Integration":"56"
     }
    }
 ]

Answer 1

<table>
    <tr>
    <th></th>
        <th>java</th>
        <th>.Net</th>
        <th>Integration</th>
    </tr>
    <tr *ngFor="let o of obj">
        <th>{{o.grade}}</th>
        <td>{{o.data['.Net']}}</td>
        <td>{{o.data['Java']}}</td>
        <td>{{o.data['Integration']}}</td>
    </tr>
</table>

Answer 2

如果您想动态执行此操作，您可以创建一个格式化数组，其中包含数组中的点。

试试这样：

TS：

  data = [
    {
      "grade": "A1",
      "data": {
        ".Net": "6",
        "Java": "7",
        "Integration": "7"
      }

    },
    {
      "grade": "B1",
      "data": {
        ".Net": "12",
        "Java": "70",
        "Integration": "56"
      }
    }
  ]
  formattedData:any = []
  columnHeaders: string[] = []


  ngOnInit() {
    this.columnHeaders = Object.keys(this.data[0].test)

    this.data.forEach(element => {
      let row = {
        grade:element.grade,
        points : Object.keys(element.test).map(key => element.test[key])
      }
      this.formattedData.push(row)
    }); 
  }

HTML：

<table class="table">
  <tbody>
    <tr>
      <th></th>
      <td *ngFor="let item of columnHeaders">{{item}}</td>
    </tr>
    <tr *ngFor="let item of formattedData">
      <th>{{item.grade}}</th>
      <td *ngFor="let point of item.points">{{point}}</td>
    </tr>
  </tbody>
</table>

如果你想使用 keyValue，请不要使用 formattedData 并这样做：

<table class="table">
  <tbody>
    <tr>
      <th></th>
      <td *ngFor="let item of data[0].test | keyvalue">{{item.key}}</td>
    </tr>
    <tr *ngFor="let item of data">
      <th>{{item.grade}}</th>
        <td *ngFor="let sub of item.test | keyvalue">{{sub.value}}</td>
    </tr>
  </tbody>
</table>

Answer 3

您可以使用以下JSON 数组对象之一创建表头数组。

export class AppComponent  {
  thFields: any = [];
  data = [
    {
      "grade": "A1",
      "data": {
        ".Net": "6",
        "Java": "7",
        "Integration": "7"
      }
    },
    {
      "grade": "B1",
      "data": {
        ".Net": "12",
        "Java": "70",
        "Integration": "56"
      }
    }];
    constructor () {
      this.createHeaderFileds();
    }

    createHeaderFileds(): void {
      for (let key in this.data[0].data) {
        this.thFields.push(key);
      }
    }
}

您可以使用上面创建的thFields 和KeyValuePipe 执行此操作，如下所示。

<table class="table">
<tbody>
    <tr>
  <td *ngFor="let header of thFields">{{header}}<td>
</tr>
    <tr *ngFor="let item of data">
      <th>{{item.grade}}</th>
        <td *ngFor="let sub of item.data | keyvalue">{{sub.value}}</td>
    </tr>
</tbody>

找工作StackBlitz Demo Here.