イオン配列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()); 
} 

}

最初のコマンドは空の配列を出力し、2番目のコマンドはクラウドのデータを出力します。私が間違っていることを理解できません。あなたはhttpリクエストを作っているので、それが起こっている理由がある

おかげで...

Answer 1

が、あなたのreturn this.lastValues;は、httpリクエストが終了するまで待機しません。

サービスを初めて呼び出すと、http要求が送信され、すぐにthis.lastValuesが空になります。 2回目にサービスを呼び出すともう1つのHTTPリクエスト（もう一度終了しません）を行い、ただちにthis.lastValuesの行列を返しますが、今回は空ではありません。なぜなら、最初のhttp要求がある時点で終了していて、初期化されました。また、したがって、基本的に、私はデータを変換するためにmap(() => {});機能を使用してい

プロバイダ

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

、および：

あなたのコードを整理すると、非同期の問題を回避するために、より良い方法、だろう最終的にlastValues行列を返すthis.http.get()を返します。

これを行うと、プロバイダの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); 
    }); 
}