Как заполнить HTML-таблицу из углового http получить, который возвращает массив JSON

Question

У меня есть служба, которая возвращает массив объектов JSON, которые я пытаюсь загрузить в HTML-таблицу.Http get возвращает данные, однако данные не будут загружены в таблицу.Я подозреваю, что у меня могут быть проблемы с типами данных, которые я использую в своем коде машинописи.Этот код не регистрирует ошибки на консоли.

Если я закомментирую таблицу данных и добавлю новую строку с {{myData}}, на странице отобразится «значения функции () {[собственный код]}»

my-data.component.html

<div class="container-fluid">
  <div class="jumbotron text-center">
    <h1>
      My Data
    </h1>
  </div>
  <div>
    <app-loader [isLoading]="isLoading"></app-loader>
    <table class="table table-hover table-responsive" [hidden]="isLoading">
      <thead>
        <tr>
            <th scope="col" data-field="myData.fileName">File Name</th>
            <th scope="col" data-field="myData.index">Index</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

my-data.component.ts

import { Component, OnInit } from '@angular/core';
import { finalize } from 'rxjs/operators';

import { MyService } from './my-service.service';

@Component({
  selector: 'app-my-data',
  templateUrl: './my-data.component.html',
  styleUrls: ['./my-data.component.scss']
})
export class MyComponent implements OnInit {
  myData: any;
  isLoading: boolean;

  constructor(private myService: MyService) {}

  ngOnInit() {
    this.isLoading = true;
    this.myService
      .getMyData()
      .pipe(
        finalize(() => {
          this.isLoading = false;
        })
      )
      .subscribe((myData: any) => {
        this.myData = myData;
      });
  }
}

my-data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

const routes = {
  dataEndpoint: 'http://localhost:53452/api/data'
};

@Injectable()
export class MyService {
  constructor(private httpClient: HttpClient) {}

  getMyData(): Observable<any> {
    return this.httpClient
      .cache()
      .get(routes.dataEndpoint)
      .pipe(
        map((body: any) => body.values),
        catchError(() => of('Error, could not load My Data'))
      );
  }
}

JSON Возвращено из get

[{"fileName":"sometext.txt", "index": 1},{"fileName":"sometext2.txt", "index": 2}]

Answer 1

Я полагаю, вы пытаетесь отобразить данные в теле таблицы. Попробуйте это.

<div class="container-fluid">
  <div class="jumbotron text-center">
    <h1>
      My Data
    </h1>
  </div>
  <div>
    <app-loader [isLoading]="isLoading"></app-loader>
    <table class="table table-hover table-responsive" [hidden]="isLoading">
      <thead>
        <tr>
            <th scope="col">File Name</th>
            <th scope="col">Index</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let file of myData">
            <td>{{file.fileName}}</td>
            <td>{{file.index}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

Мне пришлось обновить сервис, чтобы исправить проблему, которая включала добавление интерфейса и изменение body.values ​​в body. См. https://angular.io/guide/http#type-checking-the-response для получения дополнительной информации.

Обновлено my-data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

const routes = {
  dataEndpoint: 'http://localhost:53452/api/data'
};

export interface MyDataContext {
  FileName: string;
  Index: number;
}

@Injectable()
export class MyService {
  constructor(private httpClient: HttpClient) {}

  getMyData(): Observable<MyDataContext> {
    return this.httpClient
      .cache()
      .get<MyDataContext>(routes.dataEndpoint)
      .pipe(
        map((body: any) => body),
        catchError(() => of('Error, could not load My Data'))
      );
  }
}

Answer 3

Ваши данные - это массив, поэтому вы должны использовать *ngFor, например:

<div class="container-fluid">
  <div class="jumbotron text-center">
    <h1>
      My Data
    </h1>
  </div>
  <div>
    <app-loader [isLoading]="isLoading"></app-loader>
    <table class="table table-hover table-responsive" [hidden]="isLoading">
      <thead>
        <tr *ngFor="let data of myData">
            <th scope="col" data-field="data.fileName">File Name</th>
            <th scope="col" data-field="data.index">Index</th>
        </tr>
      </thead>
    </table>
  </div>
</div>