2017-12-10 6 views
1

Ich versuche, Daten von einem Webserver abzurufen und eine Tabelle mit ngFor aufzufüllen.Fehler beim Füllen von ngFor Tabelle von Webserver

Das ist mein Tisch, an dem ich ngFor:

<div class="applic-liste"> 
    <table class="table table-striped table-hover table-bordered"> 
    <tbody> 
     <tr *ngFor="let application of applications"> 
     <td>{{application.id}}</td> 
     <td>{{application.name}}</td> 
     <td>{{application.version}}</td> 
     <td>{{application.fromTo}}</td> 
     <td>{{application.description}}</td> 
     <td>{{application.geography}}</td> 
     </tr> 
</tbody> 
    </table> 
    </div> 

Ich habe diese Klasse, wo ich die Daten holen:

import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 
import { DbService } from '../../db.service.service'; 
import {Application} from '../application.component'; 

@Component({ 
    selector: 'app-applic-list', 
    templateUrl: './applic-list.component.html', 
    styleUrls: ['./applic-list.component.css'], 
    providers: [DbService], 
    encapsulation: ViewEncapsulation.None 
}) 
export class ApplicListComponent implements OnInit { 

    constructor(private _dbService:DbService) { } 
    applications:any; 
    ngOnInit() { 
    this.getData(); 
    } 

    getData(){ 
    this._dbService 
     .getData() 
     .subscribe(applications => { 
     this.applications = applications; 
    }) 
} 

} 

Und das ist mein service, wo ich auf dem Web-Server verbinden:

@Injectable() 
export class DbService { 
    applications=[]; 
    private _serverUrl: string = "http://localhost/api/"; 
    constructor(private _http:Http) { } 

getData(){ 
    return this._http.get(this._serverUrl+'select.php'). 
    map((response:Response) => response.json); 
    } 
} 

Ich definierte auch meine Anwendungen Array in diesem class:

export class Application implements OnInit { 

    constructor() { } 
    name: string; 
    version: string; 
    fromTo: string; 
    description: string; 
    geography: string; 
    ngOnInit() { 
    } 

} 

Und das sind die Fehler Ich erhalte:

enter image description here

Kann mir jemand helfen, diese mit. Ich bin neu in Angular .. und ich weiß nicht, wo das Problem ist

Ich schätze Ihre Antworten!

EDIT: Und das ist meine Json-Antwort: [{"id":"1","name":"TestName","version":"1.2","fromTo":"Test","description":"Beschreibung","geography":"Geography"}]

+0

wie sieht Ihre Antwort aus? Anwendungen – Sajeetharan

+0

Meinst du meine Json-Daten, die ich vom Webserver bekomme? siehe meine Edit – Stelios

Antwort

1

Als Fehler deuten darauf hin, dass die Anwendungen beobachtbar ist arry nicht

*ngFor="let application of applications | async" 
+0

Ich habe dies schon einmal versucht, aber ich bekomme zusätzliche Fehler: 'Fehler: InvalidPipeArgument: 'function()' ... – Stelios

+0

ändern Sie diese Zeile von Karte ((Antwort: Antwort) => response.json); abbilden ((response: Response) => response.json()); –

+1

wow schön, es hat funktioniert, vielen Dank! – Stelios

Verwandte Themen