如何生成我进入表格的 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>车辆.tsimport { 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;console.log(this.applications);    }  )  }}车辆模型.tsexport 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在可见

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

所以在组件中，它必须是相同的

ngOnInit() {

  this.apiService.getVehicles()

    .subscribe(data => {

      this.vehicle = data.results; 

      ...

    })

}

希望它能解决你的问题

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 = data

this.rows = data;

this.temp = data;

**this.vehicle = data.results;**

console.log(this.applications);

    }

  )

  }

}

Answer 3

您需要分配如下值：

1. 声明一个变量vehicle = Vehicle（组件文件中的列表类型变量，Vehicle 是导入的模型）

2. this.vehicle = data.results在您进行 API 调用的函数中赋值。

您将能够在屏幕上打印表格并获得所需的结果。希望这可以帮助。