我正在尝试解析从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>
vehicle.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);
}
)
}
}
vehicle.model.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;
}
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响应进入我准备的表中?
答案 0 :(得分:0)
您需要分配以下值:
vehicle = Vehicle
(组件文件中的列表类型变量,Vehicle是导入的模型)this.vehicle = data.results
。您将能够在屏幕上打印表格并获得所需的结果。希望这会有所帮助。
答案 1 :(得分:0)
似乎您使用的变量在模板和组件中有所不同。
在模板中,将其指定为vehicle
,如
<tr *ngFor="let veh of vehicle; let i = index">
因此在组件中,它必须相同
ngOnInit() {
this.apiService.getVehicles()
.subscribe(data => {
this.vehicle = data.results;
...
})
}
希望它可以解决您的问题
答案 2 :(得分:0)
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);
}
)
}
}