arrays - HTTP GET 无休止地请求数据

Question

我不明白为什么我的代码无休止地请求数据。在我的服务中，我得到的数据是一个对象数组。我想在服务中完成我所有的 http、 map 、订阅，因为我需要该服务包含本地数组，因为我需要在我的网页的其余部分中使用该数组。在浏览器中使用开发人员工具，会无休止地请求 get 方法，直到我的浏览器崩溃。

值得注意的是，传入的数据不是“file.json”，而是一个普通的 URL。在后端，我使用 Jackson objectmapper 将我的数据作为包含对象的数组发送。

顺便说一句，当我修改代码以仅发送 http.get('someUrl') 并在组件中进行映射和订阅时，它工作正常。我还可以使用删除数据方法的一些帮助，当我修改它并在组件中进行映射和订阅时，我没有让它工作。

希望您能看到一些明显的错误!

无限循环的代码:

我的服务:

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

我的组件:

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 中的 Observable 并在您的服务中返回一个 Observable:

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">