时间戳

首页 > 解决方案 > 带有 JSON 数据的 Angular 8 动态表

html - 带有 JSON 数据的 Angular 8 动态表

问题描述

我正在尝试使用JSON数据动态创建一个表，包括标题。我用这篇文章来达到我所得到的。

我的问题是我表中的数据看起来完全混乱了。我知道在我的第一个循环中我应该只遍历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": " ",

我究竟做错了什么？

标签： htmlangularangular8

解决方案

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

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>

推荐阅读