хотите назначить многомерный массив в ионном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-запрос закончился в какой-то момент, а матрица был инициализирован.

Лучший способ организовать свой код и, чтобы избежать проблем асинхронное, будет:

Provider

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