angular - 如何从返回 JSON 数组的 Angular http get 填充 html 表

Question

我有一个返回 JSON 对象数组的服务，我试图将其加载到 html 表中。 http get 正在返回数据，但数据不会加载到表中。我怀疑我在 typescript 代码中使用的数据类型可能有问题。此代码未向控制台记录任何错误。

如果我注释掉数据表并使用 {{ myData }} 添加新行，页面将显示“function values() { [native code] }”

我的数据.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>

我的数据.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;
      });
  }
}

我的数据.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'))
      );
  }
}

从 get 返回的 JSON

[{"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>