Angular 8 - HttpClient ПОЛУЧИТЬ сложный объект JSON и заполнить HTML-таблицу

Question

Я использую Angular 8 и запрашиваю конечную точку для получения объекта. Когда я вызываю его через Advanced REST Client, я получаю следующее возвращаемое значение JSON:

GET: http://localhost:8090/curso_conductor/

Returns:

{
  "dato": [{
      "ID_CURSO_CONDUCTOR": 1,
      "F_INICIO": "2019-09-19T05:00:00.000+0000",
      "F_FIN": "2019-12-20T05:00:00.000+0000",
      "ESTADO": "1",
      "CARNET_C": "l584f",
      "F_CADUCIDAD": "2022-06-20T05:00:00.000+0000",
      "F_EMISION": "2017-06-20T05:00:00.000+0000",
      "ID_CURSO": 1,
      "ID_PERSONA": 3
    },
    {
      "ID_CURSO_CONDUCTOR": 2,
      "F_INICIO": "2019-08-20T05:00:00.000+0000",
      "F_FIN": "2019-12-20T05:00:00.000+0000",
      "ESTADO": "1",
      "CARNET_C": "8574h",
      "F_CADUCIDAD": "2023-04-05T05:00:00.000+0000",
      "F_EMISION": "2017-04-08T05:00:00.000+0000",
      "ID_CURSO": 1,
      "ID_PERSONA": 5
    },
    {
      "ID_CURSO_CONDUCTOR": 3,
      "F_INICIO": "2019-10-09T05:00:00.000+0000",
      "F_FIN": "2019-12-10T05:00:00.000+0000",
      "ESTADO": "1",
      "CARNET_C": "2685f",
      "F_CADUCIDAD": "2022-08-10T05:00:00.000+0000",
      "F_EMISION": "2017-08-09T05:00:00.000+0000",
      "ID_CURSO": 1,
      "ID_PERSONA": 6
    }
  ],
}

В Angular 8 я тогдаУ меня есть служба, в которой я хочу сделать http-вызов конечной точке, которая вернет вышеуказанный JSON.

getCursoConductor(): Observable<Curso_Conductor[]>{
  return this.http.get<Curso_Conductor[]>(this.curso_conductores).pipe();
}

Как видите, результат необходимо поместить в объект Curso_Conductor.

И моя модель такова:

export class Curso_Conductor {
    dato: Dato[];
}

export class Dato {
    ID_CURSO_CONDUCTOR: number;
    F_INICIO:           string;
    F_FIN:              string;
    ESTADO:             string;
    CARNET_C:           string;
    F_CADUCIDAD:        string;
    F_EMISION:          string;
    ID_CURSO:           number;
    ID_PERSONA:         number;
}

Мой вопрос: как мне поместить данные в Curso_conductorComponent.html?

Это мойcomponent.html:

<table class="table table-hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>FECHA INICIO</th>
      <th>FECHA FIN</th>
      <th>ESTADO</th>
      <th>Nro CARNET</th>
      <th>FECHA CADUCIDAD</th>
      <th>FECHA EMISION</th>
      <th>IDCURSO</th>
      <th>IDPERSONA</th>
      <th colspan="2">OPCION</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngIf="curso_conductoresObservable | async as curso_conductores else empty">
      <tr *ngFor="let curso_conductor of curso_conductores">
        <td>{{curso_conductor.id_curso_conductor}}</td>
        <td>{{curso_conductor.f_inicio}}</td>
        <td>{{curso_conductor.f_fin}}</td>
        <td>{{curso_conductor.estado}}</td>
        <td>{{curso_conductor.carnet_c}}</td>
        <td>{{curso_conductor.f_caducidad}}</td>
        <td>{{curso_conductor.f_emision}}</td>
        <td>{{curso_conductor.id_curso}}</td>
        <td>{{curso_conductor.id_persona}}</td>
        <td><button class="btn btn-warning" (click)="Editar(curso_conductor)">Editar</button></td>
        <td><button class="btn btn-danger" (click)="Eliminar(curso_conductor)">Eliminar</button></td>
      </tr>
  </tbody>
</table>

И мой component.ts:

  curso_conductores: Curso_Conductor[];
  constructor(private service: ServiceService, private router: Router) { }
  @Input() nombre = '';

  ngOnInit() {
    this.service.getCursoConductor()
      .subscribe(data => {this.curso_conductores=data });
  }

Я получаю эту ошибку:

Не удается найти другой объект поддержки'[Object Object]' типа 'объект'. NgFor поддерживает только привязку к итерациям, таким как массивы.

Answer 1

В вашей реализации есть несколько проблем.

1. Массив, полученный из API, присутствует в свойстве dato. В идеале вам следует создать интерфейс для этого:

   export interface ApiResponse {
     dato: Curso_Conductor[];
   }
   
   export interface Curso_Conductor {
     ID_CURSO_CONDUCTOR: number;
     F_INICIO: string;
     F_FIN: string;
     ESTADO: string;
     CARNET_C: string;
     F_CADUCIDAD: string;
     F_EMISION: string;
     ID_CURSO: number;
     ID_PERSONA: number;
   }
   

2. Затем вам придется обновить свой сервис, чтобы отразить тип данных, который вы ожидаете. Я также меняю название службы, так как ServiceService не имеет никакого смысла вообще:

   import { Injectable } from "@angular/core";
   import { HttpClient } from "@angular/common/http";
   import { Observable } from "rxjs";
   
   import { ApiResponse } from "./models/conductor.model";
   
   @Injectable()
   export class DataService {
     curso_conductores = "assets/data.json";
   
     constructor(private http: HttpClient) {}
   
     getCursoConductor(): Observable<ApiResponse> {
       return this.http.get<ApiResponse>(this.curso_conductores);
     }
   }
   

3. Вы subscribe переходите на Observable в вашем Компонентеи вы также используете async трубу. Который автоматически делает распаковку для вас. Так что просто придерживайтесь трубы async в шаблоне. Это также то, что рекомендуется:

   import { Component } from "@angular/core";
   import { Curso_Conductor, ApiResponse } from "./models/conductors.model";
   import { DataService } from "./data.service";
   import { Observable } from "rxjs";
   import { map } from "rxjs/operators";
   
   @Component({
     selector: "my-app",
     templateUrl: "./app.component.html",
     styleUrls: ["./app.component.css"]
   })
   export class AppComponent {
     curso_conductores$: Observable<Array<Curso_Conductor>>;
   
     constructor(private service: DataService) {}
   
     ngOnInit() {
       this.curso_conductores$ = this.service.getCursoConductor()
         .pipe(
           map((apiResponse: ApiResponse) => apiResponse.dato)
         );
     }
   }
   

4. Наконец, все поля Object находятся в верхнем регистре, но вы используете их как нижний регистр в шаблоне. Это также необходимо исправить:

---

<table class="table table-hover" border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>FECHA INICIO</th>
            <th>FECHA FIN</th>
            <th>ESTADO</th>
            <th>Nro CARNET</th>
            <th>FECHA CADUCIDAD</th>
            <th>FECHA EMISION</th>
            <th>IDCURSO</th>
            <th>IDPERSONA</th>
            <th colspan="2">OPCION</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let curso_conductor of (curso_conductores$ | async) as curso_conductores">
            <td>{{curso_conductor.ID_CURSO_CONDUCTOR}}</td>
            <td>{{curso_conductor.F_INICIO}}</td>
            <td>{{curso_conductor.F_FIN}}</td>
            <td>{{curso_conductor.ESTADO}}</td>
            <td>{{curso_conductor.CARNET_C}}</td>
            <td>{{curso_conductor.F_CADUCIDAD}}</td>
            <td>{{curso_conductor.F_EMISION}}</td>
            <td>{{curso_conductor.ID_CURSO}}</td>
            <td>{{curso_conductor.ID_PERSONA}}</td>
            <td><button class="btn btn-warning" (click)="Editar(curso_conductor)">Editar</button></td>
            <td><button class="btn btn-danger" (click)="Eliminar(curso_conductor)">Eliminar</button></td>
        </tr>
    </tbody>
</table>

Надеюсь, это прояснит это для вас.

---

Вот Рабочий образец StackBlitz для вашей ссылки.

Answer 2

Вы уверены, что тип возвращаемого значения - Curso_Conductor []? Похоже, Curso_Conductor. Попробуйте это,

getCursoConductor(): Observable<Curso_Conductor>{
  return this.http.get<Curso_Conductor>(this.curso_conductores).pipe();
}

...

curso_conductore: Curso_Conductor;
constructor(private service: ServiceService, private router: Router) { }
@Input() nombre = '';
ngOnInit() {
  this.service.getCursoConductor().subscribe(data => {this.curso_conductore=data });
}

и в html

...
<tr *ngFor="let d of curso_conductore.dato.dato">
      <td>{{d.id_curso_conductor}}</td>
      <td>{{d.f_inicio}}</td>
...