無休止的HTTP GET請求數據

Question

我無法弄清楚爲什麼我的代碼無休止地請求數據。在我的服務中，我得到的數據是一個對象數組。我想做所有的http，map，訂閱服務，因爲我需要包含本地數組的服務，因爲我在我的網頁的其餘部分需要該數組。在瀏覽器中使用開發人員工具，get方法會無休止地被請求，直到我的瀏覽器崩潰。

值得注意的是傳入數據不是「file.json」，而是一個普通的URL。在後端，我使用Jackson objectmapper將數據作爲一個Array發送給對象。

順便說一句，當我修改代碼服務只發送http.get（'someUrl'）和做組件映射和訂閱，它工作正常。我也可以使用一些關於刪除數據方法的幫助，當我修改它以及在組件中執行映射和訂閱時，我沒有得到它的工作。

希望你能看到一些明顯的錯誤！

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

} 

我在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

訂閱的可觀測

是無限循環的代碼在MyComponent的，並返回一個可觀察的爲您服務：

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

而且在你的模板：

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