想要分配離子2中的多維陣列

Question

Language：Ionic2。

Description：這個想法是，我嘗試使用提供程序從雲端獲取數據。在家庭組件中，我調用提供者的方法並嘗試將其結果賦值給變量。但它不起作用。

Sample Code for provider's code

lastValues: any[][] = [[]]; 

constructor(public http: Http) {} 

getLastValues() { 
    this.http.get("http://things.ubidots.com/api/v1.6/datasources/" + this.dataSourcaId + "/variables/?token=" + this.ubidotsToken) 
     .map(res => res.json().results).subscribe(data => { 

     this.lastValues = Array(Math.ceil(data.length/2)); 
     let rowNum = 0; 

     for (let i = 0; i < data.length; i+=2) { 
      this.lastValues[rowNum] = Array(2); 

      if (data[i]) { 

       this.lastValues[rowNum][0] = data[i].name; 
       // console.log(this.lastValues[rowNum][0]); 
      } 

      if (data[i+1]) { 
       this.lastValues[rowNum][1] = data[i+1].name; 
      } 

      rowNum++; 
     } 

    }, (err) => { 
     console.log(err); 
    }); 

    return this.lastValues; 
} 

Sample code for home component

export class HomePage { 

sensors: any[][]; 

constructor(public navCtrl: NavController, public dataService: Data, public platform: Platform) { 
} 

ionViewDidLoad(){ 

    this.platform.ready().then(() => { 
     this.sensors = this.dataService.getLastValues(); 
    }); 
} 


test() { 
    console.log(this.sensors); 
    console.log(this.dataService.getLastValues()); 
} 

}

在試驗方法中，第第一個命令打印空數組，第二個命令打印來自雲的數據。無法理解我做錯了什麼事。

謝謝...

Answer 1

之所以發生的事情是，因爲你正在做一個HTTP請求，但您的return this.lastValues;不等到HTTP請求完成。

當您第一次致電服務時，會發送http請求，並立即返回空的this.lastValues。第二次調用該服務時，會發出另一個http請求（該請求再次未完成），並且您立即返回this.lastValues矩陣，但這次不是空的，因爲第一個http請求在某個點結束，矩陣已初始化。

一種更好的方式來組織你的代碼，避免異步的問題，應該是：

提供商

lastValues: any[][] = [[]]; 

constructor(public http: Http) {} 

public getLastValues(): Observable<any> { 
    return this.http.get("http://things.ubidots.com/api/v1.6/datasources/" + this.dataSourcaId + "/variables/?token=" + this.ubidotsToken) 
     .map(res => res.json().results) 
     .map(data => { 

      this.lastValues = Array(Math.ceil(data.length/2)); 
      let rowNum = 0; 

      for (let i = 0; i < data.length; i+=2) { 
      this.lastValues[rowNum] = Array(2); 

      if (data[i]) { 
       this.lastValues[rowNum][0] = data[i].name; 
       // console.log(this.lastValues[rowNum][0]); 
      } 

      if (data[i+1]) { 
       this.lastValues[rowNum][1] = data[i+1].name; 
      } 

      rowNum++; 
      } 

      return this.lastValues; 
    }); 
} 

所以基本上我使用的是map(() => {});功能來轉換數據，也返回this.http.get()，最終將返回lastValues矩陣。

通過這樣做，而不是訂閱供應商中的http.get()，您可以在組件代碼中執行該操作，避免因爲數據尚未準備好而出現問題和錯誤。

組件

export class HomePage { 

    sensors: any[][]; 

    constructor(public navCtrl: NavController, public dataService: Data, public platform: Platform) { 
    } 

    ionViewDidLoad(){ 

    this.dataService.getLastValues().subscribe(result => { 
     this.sensors = result; 
     console.log(this.sensors); 
    }, error => { 
     console.log('An error has ocurred: ' + error); 
    }); 
    } 


    test() { 
    this.dataService.getLastValues().subscribe(result => { 
     this.sensors = result; 
     console.log(this.sensors); 
    }, error => { 
     console.log('An error has ocurred: ' + error); 
    }); 
}