Question

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

值得注意的是，传入的数据不是＆＃34; file.json＆＃34;，而是普通的URL。在后端，我使用Jackson对象映射器将我的数据作为带有对象的数组发送。

BTW，当我修改代码只服务发送http.get（＆＃39; someUrl＆＃39;）并在组件中进行map和subscribe时，它工作正常。我也可以使用删除数据方法的一些帮助，当我修改它以及在组件中进行映射和订阅时，我没有使它工作。

希望你能看到一些明显的错误！

无休止地循环的代码：

为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中订阅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">

HTTP GET无休止地请求数据

1 个答案: