带有JSON数据的Angular 8动态表

Question

我正在尝试使用JSON数据（包括标头）动态创建表。我用这个post达到了我所能达到的程度。

我的问题是表中的数据显示为completely messed up。我知道在我的第一个循环中，我只应循环访问dataMessageResults [0]，但这给了我一个语法错误。

我的results.html：

<div class="play-container">

<h1>Child</h1>
    <table>
         <thead>
              <tr *ngFor="let item of dataMessageResults">           
                <th *ngFor="let item of dataMessageResults | keyvalue">{{item.key}}</th>
              </tr>
         </thead>
         <tbody>
              <tr *ngFor="let item of dataMessageResults">           
                <td *ngFor="let list of item | keyvalue">{{item.value}}</td>
              </tr>
         </tbody>
    </table>

我的结果.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-message-results',
  templateUrl: './message-results.component.html',
  styleUrls: ['./message-results.component.scss']
})

export class MessageResultsComponent {

  @Input() dataMessageResults: Object;

  constructor() { }

}

数据示例。 Angular似乎为每个JSON添加一个数字，这导致标题中的数字。

{
    "elemNb": "",
    "msgID": "",
    "year": "2019",
    "week": "42",
    "sysDatetime": "2019-10-16T11:57:34.748Z",
    "airline": "EJU",
},
{
    "elemNb": "",
    "msgID": "",
    "year": "2019",
    "week": "42",
    "sysDatetime": "2019-10-16T11:57:35.296Z",
    "airline": "DLH",
},
{
    "elemNb": "",
    "msgID": "",
    "year": "2019",
    "week": "42",
    "sysDatetime": "2019-10-16T11:59:48.599Z",
    "airline": "BAW",
    "tail": " ",

我在做什么错？

Answer 1

<div class="play-container">

<h1>Child</h1>
    <table>
         <thead>
              <tr>           
                <th *ngFor="let item of dataMessageResults">{{item.key | keyvalue}}</th>
              </tr>
         </thead>
         <tbody>
              <tr *ngFor="let item of dataMessageResults">           
                <td *ngFor="let list of item ">{{list.value | keyvalue}}</td>
              </tr>
         </tbody>
    </table> 

尝试此代码，我认为它是可行的。

Answer 2

为什么要遍历一个对象？您的数据应为数组！然后，您可以轻松计算标题：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-message-results',
  templateUrl: './message-results.component.html',
  styleUrls: ['./message-results.component.scss']
})

export class MessageResultsComponent {

  @Input() dataMessageResults: any[];

  constructor() { }

  getHeaders() {
    let headers: string[] = [];
    if(this.dataMessageResults) {
      this.dataMessageResults.foreach((value) => {
        Object.keys(value).foreach((key) => {
          if(!this.headers.find((header) => header == key)){
            headers.push(key)
          }
        })
      })
    }
    return headers;
  }
}

<div class="play-container">

<h1>Child</h1>
    <table>
         <thead>
              <tr>           
                <th *ngFor="let header of getHeaders">{{header}}</th>
              </tr>
         </thead>
         <tbody>
              <tr *ngFor="let item of dataMessageResults">           
                <td *ngFor="let list of item | keyvalue">{{item.value}}</td>
              </tr>
         </tbody>
    </table>

Answer 3

<h1>Child</h1>
    <table>
         <thead>
              <tr *ngFor="let item of dataMessageResults | keyvalue">           
                <th>{{item.key}}</th>
              </tr>
         </thead>
         <tbody>
              <tr *ngFor="let item of dataMessageResults | keyvalue">           
                <td>{{item.value}}</td>
              </tr>
         </tbody>
    </table>