带有 JSON 数据的 Angular 8 动态表答案

【问题标题】：Angular 8 dynamic table with JSON data带有 JSON 数据的 Angular 8 动态表
【发布时间】：2020-02-13 06:37:24
【问题描述】：

我正在尝试使用 JSON 数据（包括标题）动态创建表。我用这个post 来达到我的目标。

我的问题是我表中的数据出现completely messed up。我知道在每个循环的第一个循环中我应该只遍历dataMessageResults[0]，但这给了我一个语法错误。

我的结果.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": " ",

我做错了什么？

【问题讨论】：

我假设您像其他帖子一样创建了自定义管道并将其命名为 keyvalue？

标签： html angular angular8

【解决方案1】：

为什么要迭代一个对象？你的数据应该是一个数组！然后您可以轻松计算标题：

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(!headers.find((header) => header == key)){
            headers.push(key)
          }
        })
      })
    }
    return headers;
  }
}

<div class="play-container">

<h1>Child</h1>
    <table border>
         <thead>
              <tr>           
                <th *ngFor="let header of getHeaders()">{{header}}</th>
              </tr>
         </thead>
         <tbody>
              <tr *ngFor="let item of dataMessageResults">           
                <td *ngFor="let key of getHeaders()">{{item[key]}}</td>
              </tr>
         </tbody>
    </table>

【讨论】：

你是对的。它应该是一个数组，它是。我一直在想错误的方式！不幸的是，您的 getHeaders 方法不起作用。至少我现在正朝着正确的方向前进。
我做了一些更改，现在可以使用了：stackblitz.com/edit/angular-dynamic-table-header
哇。这比我的解决方案更好，更可测试，因为我的解决方案涉及对数组进行切片以便仅迭代第一个对象。谢谢
@JuNe - 非常感谢。

【解决方案2】：

我几乎可以使用它了

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

但我不知道如何指定我只想遍历标头一次。

<tr *ngFor="let message of dataMessageResults[0]">

不工作。

【讨论】：

【解决方案3】：

<div class="play-container">

<h1>Child</h1>
    <table>
         <thead>
              <tr>           
                <th *ngFor="let list of dataMessageResults">{{list.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>

更新我的答案，请检查。

【讨论】：

这会返回一个错误。 “找不到类型为 'object' 的不同支持对象 '[object Object]'。NgFor 仅支持绑定到 Iterables，例如数组。”

【解决方案4】：

<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>

【讨论】：