HTTP GET Anforderungen Daten endlos

Question

Ich kann nicht herausfinden, warum mein Code Daten endlos anfordert. In meinem Dienst bekomme ich Daten, die ein Array von Objekten sind. Ich möchte alle meine http, map, subscribe im Dienst, weil ich brauche, dass der Dienst das lokale Array enthalten, weil ich das Array im Rest meiner Webseite brauche. Mit dem Entwickler-Tool im Browser wird die Methode get endlos angefordert, bis mein Browser abstürzt.

Bemerkenswert ist, dass die eingehenden Daten keine "file.json", sondern eine einfache URL sind. Im Backend verwende ich den Jackson-Objektmapper, um meine Daten als Array mit Objekten zu senden.

BTW, wenn ich den Code zu Service ändern nur Senden der http.get ('someUrl') und tun Karte und abonnieren in der Komponente, es funktioniert gut. Ich könnte auch etwas Hilfe mit den Lösch-Daten-Methoden verwenden, ich habe es nicht zum Laufen gebracht, als ich es auch modifiziert habe, um das Mapping und das Abonnement in der Komponente zu machen.

Hoffe, Sie können einige offensichtliche Fehler sehen! endlos

die Codes, die Schleife:

MyService:

export class MyService { 

    private dummys: Array<Dummy>; 

    constructor(private http: Http) { 
     this.dummys = new Array<Dummy>(); 
    } 
    getData() { 
     this.http.get('someUrl') 
      .map((res: Response) => res.json()) 
      .subscribe(dummys => this.dummys = dummys); 
     return this.dummys; 
    } 

    saveData(dummy: Dummy) { 

     let body = JSON.stringify(dummy); 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     this.http.get('someUrl', body, options) 
      .map((res: Response) => res.json()) 
      .subscribe(dummy => this.dummys.push(dummy)); 
     return this.dummys; 
    } 

    deleteData() { 

     let index = this.dummys.indexOf(dummy); 

     let body = JSON.stringify(dummy); 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     this.http.post('someUrl', body, options) 
      .map((res: Response) => res.json()) 
      .subscribe(dummy => this.dummys = this.dummys.splice(index, 1); 
     return this.dummys; 
    } 
} 

MyComponent:

export class MyComponent { 

    name: string; 
    id: string; 
    date: string; 
    dummys: Array<Dummy>; 

    constructor(public _myService: MyService, public _router: Router) { } 

    getDatas() { 
     this._myService.getData() 
    } 

    saveDatas() { 
     let dummy = new Dummy(this.id, this.name, this.date) 
     this._myService.saveData(dummy) 
     this.name = ''; 
     this._myService.getData(); 
    } 

    deleteDatas(dummy) { 
     this._myService.deleteData(dummy); 
     this._myService.getData(); 
    } 

} 

Meine Vorlage in MyComponent:

<form (submit)="saveDatas()"> 
    <input required [(ngModel)]="name" placeholder="Add data"> 
</form> 
<br> 
<table> 
    <tr *ngFor="let data of getDatas()"> 
    <td>{{data.name}}</td> 
    <td> {{data.date}} </td> 
    <td><button (click)="removeDatas(data)">Remove</button></td> 
    </tr> 
</table> 

Answer 1

Abonnieren Sie den beobachtbaren in MyComponent und gibt einen beobachtbaren in Ihren Diensten:

export class MyService { 

... 

getData() { 
    return this.http.get('someUrl') 
     .map((res: Response) => res.json()) 
} 

... 
} 

export class MyComponent { 

... 

ngOnInit() { 
    this.getDatas(); 
} 

getDatas() { 
    this._myService.getData().subscribe(
     response => { this.datas = response}); 
} 
... 
} 

Und in der Vorlage:

<tr *ngFor="let data of datas">