HTTP GETが無限にデータを要求します

Question

私のコードがデータを無限に要求している理由を理解できません。私のサービスでは、オブジェクトの配列であるデータを取得します。 Webページの残りの部分でその配列が必要なので、ローカル配列を含むサービスが必要なので、私はすべてのhttp、map、サービスを購読する必要があります。ブラウザで開発者ツールを使用すると、ブラウザがクラッシュするまでgetメソッドが無限に要求されます。

注目されるのは、着信データが「file.json」ではなくプレーンURLであることです。バックエンドでは、オブジェクトを持つ配列としてデータを送信するためにJacksonオブジェクトマッパーを使用します。

私は、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の：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(); 
    } 

} 

マイテンプレート：

<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の中で、あなたのサービスで観察を返す：

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