webentwicklung-frage-antwort-db.com.de

Wie man Daten aus dem Web-API holt Angular 6

Ich bin ein neuer Winkelentwickler, weiß aber nicht, wo ich mich irre. Ich finde viele Quellen, aber ich habe meine Codes nicht angepasst. Meine Codes funktionieren nicht oder lassen sich vom Webclient abrufen. Könnten Sie mir bei diesem Problem helfen?

Meine Beispiel-JSON-Daten: 

{ "id": "123aCaA-9852", "name": "Eine Bank", "Adresse": "Adresse", "contactName": "Beispielname", "contactSurname": "Beispiel", "contactPhone": "12312312312", "status": falsch, "Stadt": { "id": 40, "Name": "Türkei", "Code": 34 }, Mein Beispiel ts:

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

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

  } 

}

Mein Beispiel Komponente.html

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

Sie sollten Ihre Variablen etwas besser benennen: 

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

und verwenden Sie kaf als Variable in der Vorlage.

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

ngFor dient zum Durchlaufen eines Arrays, aber Ihre Daten enthalten ein Objekt. Ich denke, der folgende Code würde funktionieren:

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

Aber das ist, nachdem Sie sichergestellt haben, dass Sie überhaupt Daten erhalten. Überprüfen Sie dazu die Antwort von Ahsan Alam Siddiqui

0
gellybutton

Sie hatten bereits API-Daten in Ihre Variable aufgenommen. Ändern Sie einfach die Schreibweise von "Lassen Sie Kafein von Kafein" in "Lassen Sie Kaf von Kafein". 

0

Nach meinen Recherchen muss ich einen Autorisierungsprozess mit Token für meine API machen, da Benutzerdaten vorhanden sind. Übrigens, ich habe meine API vom Bankserver genommen und ich habe vergessen, Sie zu sagen Danke für Kleinbuchstaben Kafein statt 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

Erstellen Sie eine service.ts-Datei und eine Funktion wie diese

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

Und importieren Sie diese service.ts in Ihre Komponente und rufen Sie dann Ihre Servicefunktion auf

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

Wenn Sie weitere Anleitungen wünschen, folgen Sie diesem Link

0