Search code examples
typescriptionic3angular4-router

Ionic 3 how to receive an array from one page to another page


I need to pass an array from one page to another. In the first page the array is created by selecting items from a list and it push all itemes ok, but when I received this array in another page, it became an array object, and I cannot read the data in my html page, heres is part of my code :

labo.ts - this is the way I create my array, and its fine

selectItem(itemKey){
   const foundAt = this.selectedQuestions.indexOf(itemKey);
   if (foundAt >= 0) {
      this.selectedQuestions.splice(foundAt, 1);
   } else {
      this.selectedQuestions.push(itemKey);
   }
  console.log(this.selectedQuestions);

}

When I finish adding items, I send it to calendar.ts

calendar(){
 console.log("ARRAY ", this.selectedQuestions)
    this.navCtrl.push(CalendarioPage,{
      queryParams: {
           value : this.selectedQuestions
       },
  });

}

This is calendaar.ts, where I need to receive the array:

 export class CalendarioPage {
  datos: Array<object>;

  constructor(public navCtrl: NavController, public navParams: NavParams,
    public http: Http, private conteSearch : ContesearchProvider) {

    this.datos = navParams.get("queryParams");

    console.log("array -> ", this.datos)

  }  
 }

In my calendar.html file I try to read the array :

<div *ngFor="let dato of datos">
  {{dato.nombre}} 
</div>

And I r eceived this error "ERROR Error: "Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."

This is what it looks the array before and after (when received in calendar.ts)

enter image description here

Thank you in advance for any idea!


Solution

  • Your passed array is available at value key of the object this.datos

    So you need to read it like this.datos.value, that should work.

    Thanks