时间戳

首页 > 解决方案 > 如何使用 *NgFor 在 html 表中显示 JSON 数组？

arrays - 如何使用 *NgFor 在 html 表中显示 JSON 数组？

问题描述

我尝试将数组的数据从外部 JSON 文件显示到 html 表。我设法在控制台日志中读取数据，但无法显示数据。我还是 Angular 7 的新手，所以我可能会在编码过程中错过一些重要的东西，我对此一无所知。

app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/https';
import { HttpErrorResponse } from '@angular/common/https';
import { getRootView } from '@angular/core/src/render3/util';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor (private httpService: HttpClient) { }
  parameter: string;

  ngOnInit () {
    this.httpService.get('./assets/fyp2019-ff11e-export.json').subscribe(
      data => {
        this.parameter = data as string;   // FILL THE ARRAY WITH DATA.
        console.log(this.parameter);    
      },
      (err: HttpErrorResponse) => {
        console.log (err.message);
      }
    );
  }


来自 json 文件的示例数据：

{
  "GoogleSheet" : {
    "Data1" : {
      "LevelTankA" : 1.5,
      "LevelTankB" : 1,
      "MotorSpeed" : 15,
      "Time" : 1
    },
    "Data2" : {
      "LevelTankA" : 5,
      "LevelTankB" : 2.3,
      "MotorSpeed" : 15,
      "Time" : 2
    },
    "Data3" : {
      "LevelTankA" : 6,
      "LevelTankB" : 2.9,
      "MotorSpeed" : 20,
      "Time" : 3
    }
  }
}


来自 component.html 的部分编码

  <table>
      <tr>
          <th>Tank A</th>
              <th>Tank B</th>
                  <th>Motor Speed</th>
                      <th>Time</th>        
      </tr>
      <!-- BIND ARRAY TO TABLE -->
      <tr *ngFor="let val of parameter; let i = index">   
    //prepare the key and grab the data key and values
    <td *ngFor="let obj of val">{{obj.LevelTankA | json}}</td>
    <td *ngFor="let obj of val">{{obj.LevelTankB | json}}</td>
    <td *ngFor="let obj of val">{{obj.MotorSpeed | json}}</td>
    <td *ngFor="let obj of val">{{obj.Time | json}}</td>           
      </tr>
  </table>

我不知道为什么我不能将数组绑定到 html 表。我尝试使用 *ngFor 和 *ngIf 进行各种编码，但仍然无法显示数据。

标签： arraysangulartypescriptangular7ngfor

解决方案

问题是参数变量的类型是字符串而不是数组：

parameter: string ->  parameter: any[];

而且从服务获取数据时，响应应该作为对象处理。

this.httpService.get('./assets/fyp2019-ff11e-export.json').subscribe(
      data => {
        this.parameter = data;   // FILL THE ARRAY WITH DATA.
        console.log(this.parameter);    
      },
      (err: HttpErrorResponse) => {
        console.log (err.message);
      }
    );

编辑：json文件也有问题，应该是这样的：

{
  "GoogleSheet" : [
    "Data1" : {
      "LevelTankA" : 1.5,
      "LevelTankB" : 1,
      "MotorSpeed" : 15,
      "Time" : 1
    },
    "Data2" : {
      "LevelTankA" : 5,
      "LevelTankB" : 2.3,
      "MotorSpeed" : 15,
      "Time" : 2
    },
    "Data3" : {
      "LevelTankA" : 6,
      "LevelTankB" : 2.9,
      "MotorSpeed" : 20,
      "Time" : 3
    }
  ]
}

由于存在顶级对象，因此必须修改 ngfor：

<tr *ngFor="let val of parameter.GoogleSheet; let i = index">

推荐阅读