@Saenz wrote:

Hola a todos, espero anden muy bien, les comento mi problema, quiero utilizar una lista que tengo en una pagina llamada Primera-A en otra q se llama equipos, me gustaria que la lista se genere de forma dinamica y poder mostrar la informacion en la pagina equipos segun que boton haya presionado en la pagina Primera-A, me tira el siguiente error:

Error: Uncaught (in promise): TypeError: Cannot read property ‘nombre’ of undefined
TypeError: Cannot read property ‘nombre’ of undefined
at Object.eval [as updateRenderer] (ng:///AppModule/EquiposPage.ngfactory.js:37:34)
at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor.js:15109:21)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:14223:14)
at callViewAction (http://localhost:8100/build/vendor.js:14569:21)
at execComponentViewsAction (http://localhost:8100/build/vendor.js:14501:13)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:14224:5)
at callWithDebugContext (http://localhost:8100/build/vendor.js:15472:42)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8100/build/vendor.js:15009:12)
at ViewRef_.detectChanges (http://localhost:8100/build/vendor.js:11993:22)
at NavControllerBase._viewAttachToDOM (http://localhost:8100/build/vendor.js:51942:40)
at c (http://localhost:8100/build/polyfills.js:3:19752)
at Object.reject (http://localhost:8100/build/polyfills.js:3:19174)
at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:51705:16)
at NavControllerBase._failed (http://localhost:8100/build/vendor.js:51698:14)
at http://localhost:8100/build/vendor.js:51745:59
at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
at Object.onInvoke (http://localhost:8100/build/vendor.js:5134:33)
at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
at r.run (http://localhost:8100/build/polyfills.js:3:10143)
at http://localhost:8100/build/polyfills.js:3:20242

Les comparto los 2 archivos html y ts.

Primera-A Html

Primera - A

<ion-segment [(ngModel)]="PrimeraA">
    <ion-segment-button value="Equipos">
      Equipos
    </ion-segment-button>
    <ion-segment-button value="Posiciones">
      Posiciones
    </ion-segment-button>
    <ion-segment-button value="Goleadores">
      Goleadores
    </ion-segment-button>
    <ion-segment-button value="Fixture">
      Fixture
    </ion-segment-button>
</ion-segment>

<div [ngSwitch]="PrimeraA">
    <ion-list *ngSwitchCase="'Equipos'">
            <ion-item *ngFor="let equipo of equiposPA"(click)="abrirEquipo()">
              <img [src]="equipo.imagen" item-left>
              <h3>{{equipo.nombre}}</h3>
              <p small>{{equipo.localidad}}</p>
            </ion-item>        
    </ion-list>
  
    <ion-list *ngSwitchCase="'Posiciones'">
      <ion-item>
        <h2>Posiciones</h2>
      </ion-item>
      ...
    </ion-list>

    <ion-list *ngSwitchCase="'Goleadores'">
        <ion-item>
          <h2>Goleadores</h2>
        </ion-item>
        ...
    </ion-list>

    <ion-list *ngSwitchCase="'Fixture'">
        <ion-item>
          <h2>Fixture</h2>
        </ion-item>
        ...
    </ion-list>
  </div>

Primera-A ts

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams, MenuController } from ‘ionic-angular’;
import { EquiposPage } from ‘…/equipos/equipos’;

@IonicPage()
@Component({
selector: ‘page-primera-a’,
templateUrl: ‘primera-a.html’,
})
export class PrimeraAPage {

equiposPA:any [] = [
{
nombre:“Complejo Deportivo”,
localidad:“Justiniano Posse”,
imagen:“assets/imgs/complejo.png”
},
{
nombre:“San Martin”,
localidad:“Monte Buey”,
imagen:“assets/imgs/sanmartin.png”
},
{
nombre:“Defensores de Juventud”,
localidad:“Justiniano Posse”,
imagen:“assets/imgs/defensores.png”
},
{
nombre:“Matienzo”,
localidad:“Monte Buey”,
imagen:“assets/imgs/matienzo.png”
}
];

constructor(public navCtrl: NavController, public navParams: NavParams, private menuCtrl: MenuController) {

}

ionViewDidLoad() {
console.log(‘ionViewDidLoad PrimeraAPage’);
}

mostrarMenuLateral()
{
this.menuCtrl.toggle();
}
abrirEquipo(equipo)
{
this.navCtrl.push(EquiposPage, { equipo: equipo });
}
}

Equipo html

Equipos

{{item.nombre}}

Equipo ts

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

@IonicPage()
@Component({
selector: ‘page-equipos’,
templateUrl: ‘equipos.html’,
})
export class EquiposPage {

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

this.item = navParams.data.equipo;

}

ionViewDidLoad() {
console.log(‘ionViewDidLoad EquiposPage’);
}

}

Desde ya muchas gracias y espero puedan ayudarme!

Saludos

Posts: 1

Participants: 1

Read full topic