如何生成我进入表格的 json 响应？

Question

我正在尝试解析从 swapi 获得的 API 响应，我希望能够实现，但 API 响应仅出现在控制台日志中。我也想得到我制作的表格的回应。

swapi 是一个公共 API，您可以在这里找到https://swapi.co/

这是我的代码。车辆.html

<div class="card mb-3">

  <form class="form-inline my-2 my-lg-0">

<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success my-2 my-sm-0" 

type="submit">Search</button>

  </form>

</div>

<div class="card mb-3">

  <div class="card-header"><b>Vehicle</b></div>

<div class="card-body table-responsive">

  <table class="table table-hover table-striped">

      <thead>

      <tr>

          <th>No</th>

          <th>Name</th>

          <th>Vehicle Class</th>

          <th>Manufacture</th>

      </tr>

      </thead>

      <tbody>

      <tr *ngFor="let veh of vehicle; let i = index">

        <td>{{ i+1 }}</td>

        <td>{{ veh?.name }}</td>

        <td>{{ veh?.vehicle_class }}</td>

        <td>{{ veh?.manufacturer }}</td>

      </tr>

      </tbody>

      </table>

  </div>

</div>

车辆.ts

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

import { Vehicle } from './vehicle.model';

import { ApiService } from 'src/app/api.service';

@Component({

selector: 'app-vehicle',

templateUrl: './vehicle.component.html',

styleUrls: ['./vehicle.component.scss']

})

export class VehicleComponent implements OnInit {

vehicle: Vehicle[];

constructor(private apiService: ApiService) { }

rows : any;

temp : any;

applications: any;

ngOnInit() {

this.apiService.getVehicles()

.subscribe(data => {

this.applications = data

this.rows = data;

this.temp = data;

console.log(this.applications);

    }

  )

  }

}

车辆模型.ts

export class Vehicle{

public name: string;

public model: string;

public manufacturer: string;

public cost_in_credits: string;

public length: string;

public max_atmosphering_speed: string;

public crew: string;

public passengers: string;

public cargo_capacity: string;

public consumables: string;

public vehicle_class: string;

}

Answer 1

似乎您在模板与组件中使用的变量不同。在模板中可以指定它vehicle在可见&nbsp; <tr *ngFor="let veh of vehicle; let i = index">所以在组件中，它必须是相同的ngOnInit() {&nbsp; this.apiService.getVehicles()&nbsp; &nbsp; .subscribe(data => {&nbsp; &nbsp; &nbsp; this.vehicle = data.results;&nbsp;&nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; })}希望它能解决你的问题

Answer 2

import { Component, OnInit } from '@angular/core';import { Vehicle } from './vehicle.model';import { ApiService } from 'src/app/api.service';@Component({selector: 'app-vehicle',templateUrl: './vehicle.component.html',styleUrls: ['./vehicle.component.scss']})export class VehicleComponent implements OnInit {vehicle: Vehicle[];constructor(private apiService: ApiService) { }rows : any;temp : any;applications: any;ngOnInit() {this.apiService.getVehicles().subscribe(data => {this.applications = datathis.rows = data;this.temp = data;**this.vehicle = data.results;**console.log(this.applications);&nbsp; &nbsp; }&nbsp; )&nbsp; }}

Answer 3

您需要分配如下值：声明一个变量vehicle = Vehicle（组件文件中的列表类型变量，Vehicle 是导入的模型）this.vehicle = data.results在您进行 API 调用的函数中赋值。您将能够在屏幕上打印表格并获得所需的结果。希望这可以帮助。