J'essaie d'analyser la réponse de l'API de Swapi, ce que j'espère être atteint, mais la réponse de l'API n'apparaît que dans le journal de la console. Je veux aussi obtenir cette réponse avec la table que j'ai faite.
swapi est une API publique que vous pouvez trouver ici https: / /swapi.co/ P>
Ceci est mon code.
véhicule.html p> véhicule.ts p> véhicule.model.ts p> 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
3 Réponses :
Vous devez attribuer les valeurs de la manière suivante:
véhicule = véhicule (une variable de type de liste dans votre fichier de composant, le véhicule est le modèle importé)
- Attribuer
ceci.vehicle = data.Results dans la fonction où vous faites un appel API.
Vous pourrez imprimer la table sur votre écran et atteindre le résultat souhaité. J'espère que cela aide.
semble que la variable que vous utilisez est différente dans le composant vs modèle.
dans le modèle que vous spécifiez comme donc dans le composant, il doit être identique < Pré> xxx J'espère que cela peut résoudre votre problème véhicule comme indiqué dans
Beau coment ceci résolve. Je modifie à ce nconinit () {this.apiserservice.gethales () .Subscribe (données => {this.vehicle = data.results; console.log (this.applications);} et changez de véhicule: véhicule []; au véhicule: véhicule;
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);
}
)
}
}
Si je comprends votre problème, vous souhaitez afficher
this.application de données dans votre table?Changer
applications au lieu devéhiculeMerci à tous de répondre ma question ..