Как отобразить массив JSON в HTML-таблицу, используя * NgFor? - PullRequest
Новая
       14

Как отобразить массив JSON в HTML-таблицу, используя * NgFor?

0 голосов
/ 13 апреля 2019

Я пытаюсь отобразить данные массива из внешнего файла 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, но все еще не могу отобразить данные.

Ответы [ 2 ]

0 голосов
/ 13 апреля 2019

в моем проекте с использованием данных файла Json.

Сначала создайте папку и создайте файл parameter.json

Я изменил ваш Json так же, как показано ниже 

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

Путь должен быть как 

ProjectName\src\app\pages\module\_configuration\parameter.json

Импорт parameter.json в Компоненте 

import * as parameterData from './_configuration/parameter.json';

Объявить параметр как любой, как показано ниже 

parameter: any;

инициализируйте в ngOninit вы получите данные. 

  ngOnInit() {
    this.parameter= <any>parameterData.default;
  }

Я изменил ваш 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>{{ val.LevelTankA}}</td>
            <td>{{ val.LevelTankB}}</td>
            <td>{{ val.MotorSpeed}}</td>
            <td>{{ val.Time}}</td>
      </tr>
  </table>

В соответствии с моим пониманием, я дал решение, я надеюсь, что оно будет полезным для вас.

0 голосов
/ 13 апреля 2019

Проблема в том, что тип переменной параметра - строка вместо массива: 

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);
      }
    );

Edit: Также существует проблема с файлом 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">
...