阵列推送将覆盖现有阵列

时间:2018-09-02 14:52:19

标签: javascript angular typescript

我需要构造一个来自每个用户的数据响应数组。

import * as localforage from "localforage";

mobileData: any[] = [];

constructor(private dataService: DataService){}

ngOninit(){

    for(var i=0; i<users.length; i++){
        this.getData(users.id);
    }
}

getData(id) {

    this.dataService.getData(id).subscribe(response => {

        this.dataStorage(response);
    });
}

dataStorage(payload: any) {

    this.mobileData.push(payload);

    console.log("mobile data Array ", this.mobileData);

    if(this.mobileData.lenth === this.users.length){

       localforage.setItem("usersData", this.mobileData);
    }
}

问题是我的数组不断被新数据覆盖,而不是附加数据。

//service
  getData(id:any): Observable<any> {
    let method                      = "GET";
    let url                             = "/api/getData";
    let data                            = "id="+id;
    let header:Headers                  = new Headers();
     header.set('Content-Type', 'application/x-www-form-urlencoded' );

     return this.http.request(this.newRequest(method,url,data,header))
       .map(this.extractData)
       .catch(this.handleError);
}

这是我第一次发帖。如果需要更多信息,请告诉我。

谢谢。

3 个答案:

答案 0 :(得分:0)

这应该可以解决问题。只需将response分配给mobileData即可进行订阅,并在模板中使用mobileData来显示它。

mobileData = [];

this.dataService.getData(id).subscribe(response => {
    this.mobileData = response;
});

答案 1 :(得分:0)

ngOninit更改为ngOnInit。我没有看到您的代码有任何其他错误。无论如何,我为您创建了this working example。将其与您的代码进行比较。

答案 2 :(得分:0)

export class HelloComponent implements OnInit {
	mobileData : any[] = [];
	isFinished = false;

	constructor(private dataService: DataService) {}

	ngOnInit(){
		for(var i=0; i<users.length; i++){
			this.getData(users.id);
		}
	}

	getData(id) {
		this.dataService.getData(id).subscribe(response => {
			this.dataStorage(response);
		});
	}
	
	dataStorage(payload: any) {
		this.mobileData.push(payload);
		console.log("mobile data Array ", this.mobileData);
		if(this.mobileData.length === this.users.length){
		   localforage.setItem("usersData", this.mobileData);
		}
	}
}