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

Question

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

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

这是我的代码。 vehicle.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>

车辆

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);
    }
  )
  }
}

车辆模型

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;

}

api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from "@angular/common/http";
import {HttpParams} from "@angular/common/http";
import {Router} from '@angular/router';

const headers = new HttpHeaders()
.set("Content-Type", "application/json");

var params = new HttpParams()

@Injectable({
  providedIn: 'root'
})
export class ApiService {
constructor(private http: HttpClient, private router: Router) { }

  getPeoples(){
return this.http.get("https://swapi.co/api/people/");
  }
  getPlanets(){
return this.http.get("https://swapi.co/api/planets/")
  }
  getFilms(){
    return this.http.get("https://swapi.co/api/films/")
  }
  getVehicles(){
return this.http.get("https://swapi.co/api/vehicles/")
}
getSpecies(){
return this.http.get("https://swapi.co/api/species/")
  }
getStarships(){
return this.http.get("https://swapi.co/api/starships/")
}
}

这是我的响应JSON

count: 39, next: "https://swapi.co/api/vehicles/?page=2", previous: null, 
results: Array(10)}
count: 39
next: "https://swapi.co/api/vehicles/?page=2"
previous: null
results: Array(10)
0: {name: "Sand Crawler", model: "Digger Crawler", manufacturer: 
  "Corellia Mining Corporation", cost_in_credits: "150000", length: 
"36.8", …}
1: {name: "T-16 skyhopper", model: "T-16 skyhopper", manufacturer: "Incom 
Corporation", cost_in_credits: "14500", length: "10.4", …}
2: {name: "X-34 landspeeder", model: "X-34 landspeeder", manufacturer: 
"SoroSuub Corporation", cost_in_credits: "10550", length: "3.4", …}
3: {name: "TIE/LN starfighter", model: "Twin Ion Engine/Ln Starfighter", 
manufacturer: "Sienar Fleet Systems", cost_in_credits: "unknown", length: 
"6.4", …}
4: {name: "Snowspeeder", model: "t-47 airspeeder", manufacturer: "Incom 
corporation", cost_in_credits: "unknown", length: "4.5", …}
 5: {name: "TIE bomber", model: "TIE/sa bomber", manufacturer: "Sienar 
 Fleet Systems", cost_in_credits: "unknown", length: "7.8", …}
6: {name: "AT-AT", model: "All Terrain Armored Transport", manufacturer: 
"Kuat Drive Yards, Imperial Department of Military Research", 
cost_in_credits: "unknown", length: "20", …}
7: {name: "AT-ST", model: "All Terrain Scout Transport", manufacturer: 
"Kuat Drive Yards, Imperial Department of Military Research", 
cost_in_credits: "unknown", length: "2", …}
8: {name: "Storm IV Twin-Pod cloud car", model: "Storm IV Twin-Pod", 
manufacturer: "Bespin Motors", cost_in_credits: "75000", length: "7", …}
9: {name: "Sail barge", model: "Modified Luxury Sail Barge", 
manufacturer: "Ubrikkian Industries Custom Vehicle Division", 
cost_in_credits: "285000", length: "30", …}
length: 10
__proto__: Array(0)
__proto__: Object

如何使json响应进入我准备的表中？

Answer 1

您需要分配以下值：

1. 声明一个变量vehicle = Vehicle （组件文件中的列表类型变量，Vehicle是导入的模型）
2. 在进行API调用的函数中分配this.vehicle = data.results 。

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

Answer 2

似乎您使用的变量在模板和组件中是不同的。

在模板中，将其指定为vehicle如

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

因此在组件中，必须相同

ngOnInit() {
  this.apiService.getVehicles()
    .subscribe(data => {
      this.vehicle = data.results; 
      ...
    })
}

希望它能解决您的问题

Answer 3

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);
    }
  )
  }
}