tablouri - cereri HTTP GET de date în mod continuu

Nu pot să îmi dau seama de ce codul meu solicită date la nesfârșit. În serviciul meu obțin date care sunt un Array de Obiecte. Vreau să fac toate operațiunile http, map, subscribe în serviciu, pentru că am nevoie ca serviciul să conțină array-ul local, pentru că am nevoie de acel Array în restul paginii mele web. Folosind instrumentul pentru dezvoltatori din browser, metoda get este solicitată la nesfârșit, până când browserul meu se blochează.

Este demn de remarcat faptul că datele primite nu sunt un „file.json”, ci un URL simplu. În partea de backend folosesc Jackson objectmapper pentru a trimite datele mele ca un Array cu obiecte.

Apropo, când modific codul astfel încât serviciul să se ocupe doar de trimiterea http.get('someUrl') și să fac map și subscribe în componentă, funcționează bine. Aș putea folosi, de asemenea, niște ajutor cu metodele de ștergere a datelor, nu am reușit să funcționeze când le-am modificat tot pentru a face mapping și subscription în componentă.

Sper că poți vedea câteva greșeli evidente!

Codurile care se repetă la nesfârșit:

ServiciulMeu :

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;
    }
}

ComponentaMea :

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();
    }

}

Șablonul meu în 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>

Răspuns #1

Abonați-vă la Observable în MyComponent și returnați un Observable în serviciul dvs.:

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});
}
...
}

Și în șablonul tău:

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