web-dev-qa-db-fra.com

Comment récupérer des données depuis une API Web Angular 6

Je suis un nouveau développeur angulaire mais je ne sais pas où je me trompe. Je trouve beaucoup de sources mais je n’ai pas adapté mes codes. Mes codes ne fonctionnent pas ou ne fonctionnent pas avec le client Web Pouvez-vous m'aider avec ce problème?

Mon exemple JSON Data: 

{ "id": "123aCaA-9852", "nom": "une banque", "adresse": "adres", "contactName": "Exemple de nom", "contactSurname": "Exemple", "contactPhone": "12312312312", "status": false, "ville": { "id": 40, "nom": "Turquie", "code": 34 }, Mon exemple ts:

export class Kafein {
    name:string;
    address:string;
}

Mon exemple kafein.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Kafein } from './kafein';
import { Observable } from 'rxjs/internal/Observable';
@Component({
  selector: 'app-kafein',
  templateUrl: './kafein.component.html',
  styleUrls: ['./kafein.component.css']
})
export class KafeinComponent implements OnInit {
  title = "Kafein";
  //kafein:Observable<Kafein[]>;
  kafein:Kafein[];
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getProducts();
  }
  getProducts(){

   //this.kafein = this.http.get<Kafein[]>('http:example');
   this.http.get<Kafein[]>('http:example').subscribe(res=>{this.kafein=res});

  } 

}

Mon exemple de composant.html

<tr *ngFor='let kafein of Kafein'>
        <th scope="row">1</th>
        <td>{{kafein.name}}</td>
        <td>{{kafein.adress}}</td>
</tr>
angularrestapi
3
Emre Sert

Vous devriez nommer vos variables mieux: 

let kaf of kafein // <---change the K in Kafein to k(lowercase)

et utilisez kaf comme variable dans le modèle.

<tr *ngFor='let kaf of kafein'>
     <th scope="row">1</th>
     <td>{{kaf.name}}</td>
     <td>{{kaf.adress}}</td>
</tr>
2
Jai

ngFor est destiné à la lecture en boucle d'un tableau, mais vos données contiennent un objet. Je vais deviner que le code suivant fonctionnerait:

<tr>
        <th>1</th>
        <td>{{kafein['name']}}</td>
        <td>{{kafein['adress']}}</td>
</tr>

Mais c'est après vous être assuré que vous obtenez les données en premier lieu. Pour cela, vérifiez la réponse de Ahsan Alam Siddiqui

0
gellybutton

Vous aviez déjà eu des données api dans votre variable. Il suffit de changer l'orthographe de 'let kafein of Kafein' à 'let kaf of kafein' ' 

0
Shashikant Devani

Selon mes recherches, je dois créer un processus d'autorisation avec jeton pour mon API en raison de mon statut d'utilisateur. En passant, j'ai pris mon API du serveur de la banque et j'ai oublié de vous dire.Le problème a été résolu avec le code suivant.Beaucoup de remerciement pour kafein minuscule au lieu de Kafein :)

httpOptions = {
    headers: new HttpHeaders({
      'Authorization':'bearer exampletoken',// TOKEN 
      'Access-Control-Allow-Origin':'*',
      'Access-Control-Allow-Methods':'*',
      'Access-Control-Allow-Headers':'*'
    }),
    withCredentials: false
  };
0
Emre Sert

Créez un fichier service.ts et créez une fonction comme celle-ci

getUsers(){
return  this.httpClient.get("http:example");
}

Et importez ce service.ts dans votre composant, puis appelez votre fonction de service comme ceci

getUsers(){
this.apiService.getUsers().subscribe((data:  Array<object>) => {
    this.kafein  =  data;
    console.log(data);
});

Si vous voulez des conseils supplémentaires, suivez ceci Link

0
Ahsan Alam Siddiqui