1

i want to pass an array of objects and to arrange it into the next page in order of pasillo, the objects with pasillo 1 in the ion list 1 and so on. Im kinda new to ionic2 and i can't figure how to, I tried to make it with ng-hide but no luck, if you could help me i would be more than thankful. The error I'm getting right now is that listaRdy[i].pasillo in undefined. listaRdy{name:string,pasillo:number,id:string}

typescript file:

         import { Component } from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-lista-ready',
  templateUrl: 'lista-ready.html',
})
export class ListaReadyPage {

  listaRdy:{name:string,pasillo:number,id:string}[];
  pasillo1=false;
  pasillo2=false;
  pasillo3=false;
  pasillo4=false;
  pasillo5=false;
  pasillo6=false;
  pasillo7=false;
  pasillo8=false;
  pasillo9=false;
  pasillo10=false;
  pasillo11=false;
  pasillo12=false;
  pasillo13=false;
  pasillo14=false;


  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.listaRdy=this.navParams.data;
  }

  ionViewWillEnter(){
    for(var i=0; this.listaRdy.length;i++) {
      if (this.listaRdy[i].pasillo == 1) {
        this.pasillo1 = true;
      }

      if (this.listaRdy[i].pasillo == 2) {
        this.pasillo2 = true;
      }

      if (this.listaRdy[i].pasillo == 3) {
        this.pasillo3 = true;
      }

      if (this.listaRdy[i].pasillo == 4) {
        this.pasillo4 = true;
      }

      if (this.listaRdy[i].pasillo == 5) {
        this.pasillo5 = true;
      }

      if (this.listaRdy[i].pasillo == 6) {
        this.pasillo6 = true;
      }

      if (this.listaRdy[i].pasillo == 7) {
        this.pasillo7 = true;
      }

      if (this.listaRdy[i].pasillo == 8) {
        this.pasillo8 = true;
      }

      if (this.listaRdy[i].pasillo == 9) {
        this.pasillo9 = true;
      }

      if (this.listaRdy[i].pasillo == 10) {
        this.pasillo10 = true;
      }

      if (this.listaRdy[i].pasillo == 11) {
        this.pasillo11 = true;
      }

      if (this.listaRdy[i].pasillo == 12) {
        this.pasillo12 = true;
      }

      if (this.listaRdy[i].pasillo == 13) {
        this.pasillo13 = true;
      }

      if (this.listaRdy[i].pasillo == 14) {
        this.pasillo14 = true;
      }
    }
  }

}

htmlFile:

<ion-header>

  <ion-navbar>
    <ion-title>listaReady</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>
    <ion-list-header ng-hide="pasillo1==false" >Pasillo 1</ion-list-header>
  </ion-list>

  <ion-list>
    <ion-list-header ng-hide="pasillo2==false" >Pasillo 2</ion-list-header>
  </ion-list>

  <ion-list>
    <ion-list-header ng-show="pasillo3==true" >Pasillo 3</ion-list-header>
  </ion-list>

  <ion-list>
    <ion-list-header ng-show="pasillo4==true" >Pasillo 4</ion-list-header>
  </ion-list>

  <ion-list>
    <ion-list-header ng-show="pasillo5==true" >Pasillo 5</ion-list-header>
  </ion-list>

  <ion-list>
    <ion-list-header ng-show="pasillo6==true" >Pasillo 6</ion-list-header>
  </ion-list>

  <ion-list>
    <ion-list-header ng-show="pasillo7==true" >Pasillo 7</ion-list-header>
  </ion-list>

  <ion-list>
    <ion-list-header ng-show="pasillo8==true" >Pasillo 8</ion-list-header>
  </ion-list>

  <ion-list>
    <ion-list-header ng-show="pasillo9==true" >Pasillo 9</ion-list-header>
  </ion-list>

  <ion-list>
    <ion-list-header ng-show="pasillo10==true" >Pasillo 10</ion-list-header>
  </ion-list>

  <ion-list>
    <ion-list-header ng-show="pasillo11==true" >Pasillo 11</ion-list-header>
  </ion-list>

  <ion-list>
    <ion-list-header ng-show="pasillo12==true" >Pasillo 12</ion-list-header>
  </ion-list>

  <ion-list>
    <ion-list-header ng-show="pasillo13==true" >Pasillo 13</ion-list-header>
  </ion-list>

  <ion-list>
    <ion-list-header ng-show="pasillo14==true" >Pasillo 14</ion-list-header>
  </ion-list>
</ion-content>
Jean Guzman
  • 2,162
  • 1
  • 17
  • 27
Jose Alberto Santiago Luna
  • 91
  • 1
  • 10
  • Why don't you refactor to achieve a muche cleaner code? You can instead of create multiple attributes (pasillo1, pasillo2, etc...) create an array, set its defaults values (11 falses, in the case) and iterate over this array in the template to build the markup. This kind of code you ahve written is very hard to debug/mantain/evolve and very easy to produce bugs. – Christian Benseler Jun 27 '17 at 19:28
  • Yes, that's what i planned to do, just did it this way to test it quickly, but even if i do refactor it, im having an error with listaRdy[i].pasillo which appears undefined – Jose Alberto Santiago Luna Jun 27 '17 at 19:43
  • So the problem is not in this compontent/class, but the this.navParams.data it is receiving is not an array with this structure (an array of objects and the [i] object having a key named 'pasillo'). You can try to console.log(this.navParams.data) and check what you are receiving. – Christian Benseler Jun 27 '17 at 20:04
  • i did the console log and i received an array of objects with the structure i was expecting,[{name:string,pasillo:number, id:string}] – Jose Alberto Santiago Luna Jun 27 '17 at 20:45
  • https://stackoverflow.com/questions/35578083/what-is-the-equivalent-of-ngshow-and-nghide-in-angular2 – Suraj Rao Jun 28 '17 at 04:15
  • Do a console.log(this.listaRdy[i]) inside the for to check what is the value. By the way, you can rewrite this piece of code using .forEach() com ES6 (following the Angular styleguide). – Christian Benseler Jun 28 '17 at 11:44

0 Answers0