0

Estoy creando una app en ionic Es una app de asistencias que tiene un servicio. Y el html contiene un ngfor y un {{ note.name }} y al momento de clickear en los nombre, me devulve el error cannot read property 'name' undefined

Aca les dejo el codigo Home html

<ion-header><ion-navbar><ion-title>1º 1º</ion-title></ion-navbar></ion-header>


<ion-content>
  <ion-list>
    <button ion-item *ngFor="let note of notes" (click)="subir()" >
      {{ note.name }}
    </button>
  </ion-list>
  <ion-fab right bottom>
      <button ion-fab ><ion-icon name="add"></ion-icon></button>

</ion-fab>
</ion-content>

Home.ts

 import { Component } from '@angular/core';
import { NavController, NavParams  } from 'ionic-angular';
import { Añadir11Page } from "../añadir11/añadir11";
import { NoteService } from "../../service/notes.service";

@Component({
  selector: 'page-manana11',
  templateUrl: 'manana11.html',
})
export class Manana11Page {

notes = [];

  constructor(public navCtrl: NavController, public navParams: NavParams, public noteService : NoteService) {
    this.notes = noteService.getNotes();

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Manana11Page');
  }

public subir(){
  this.navCtrl.push( Añadir11Page );
}

}

y el servicio:

import { Injectable } from '@angular/core';


@Injectable()
export class NoteService{
  note = [
    {id:1, name: "Reymundo Nahuel"},
    {id:2, name: "Alumno2"},
    {id:3, name: "Alumno3"}
  ];
  public getNotes(){
    return this.note;
  }

}

Añadir11Page

<ion-header>

  <ion-navbar>
    <ion-title>Añadir alumno</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
  <ion-list>

   <ion-item>
     <ion-label fixed>Nombre y apellido</ion-label>
     <ion-input type="text" [(ngModel)]="note.name"></ion-input>
   </ion-item>
 </ion-list>
 <ion-item>
  <ion-label>1/2 A</ion-label>
  <ion-checkbox color="green" checked="false"></ion-checkbox>
</ion-item>
<ion-item>
 <ion-label>1/2 T</ion-label>
 <ion-checkbox color="green" checked="false"></ion-checkbox>
</ion-item>
<ion-item>
 <ion-label>1/4 A</ion-label>
 <ion-checkbox color="green" checked="false"></ion-checkbox>
</ion-item>
<ion-item>
 <ion-label>AA A</ion-label>
 <ion-checkbox color="green" checked="false"></ion-checkbox>
</ion-item>
<ion-item>
 <ion-label>AA T</ion-label>
 <ion-checkbox color="green" checked="false"></ion-checkbox>
</ion-item>
 <div padding>
   <button ion-button color="primary" block (click)="createNote()" >Añadir</button>
 </div>

Añadir11 TS

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


@Component({
  selector: 'page-añadir11',
  templateUrl: 'añadir11.html',
})
export class Añadir11Page {
  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl:ViewController) {
}
}
4
  • Buenas, tendrías que añadir el código del page Añadir11Page que es donde se encuentra el error, ya que en el código que muestras todo es correcto.
    – lDanny7
    Commented el 9 may. 2018 a las 7:32
  • Listo, ya lo añadi a la publicacion! Commented el 9 may. 2018 a las 14:40
  • El componente Añadir11 no tiene una propiedad note que bindear. PD: No uses nunca caracteres especiales como ñ por cuestión de compatiblidad y buenas prácticas.
    – gugadev
    Commented el 9 may. 2018 a las 15:03
  • A mi me está pasando esto, y hago un console.log de la propiedad que me salta este error(en este caso la mia se llama (_id) y llega el dato, pero me sigue saliendo undefined. Lo lograste solucionar? Commented el 11 sept. 2020 a las 5:51

2 respuestas 2

0

Ya intuía que usabas la variable note en la page Añadir11. Lo que tienes que haces es pasar como parámetro el note que quieres al hacer push. Ejemplo:

public subir(note){ this.navCtrl.push( Añadir11Page, { "id": note.id, "nombre": note.name }); }

Y en el controlador de Añadir11 recuperar los datos de la siguiente manera :

constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl:ViewController) {
     let id = navParams.get('id');
     let nombre= navParams.get('nombre');
}

Tienes que cambiar esto en el html:

  <ion-list>
    <button ion-item *ngFor="let note of notes" (click)="subir(note)" >
      {{ note.name }}
    </button>
  </ion-list>

Recuerda que tienes que pasar los parámetros estos no se pasan solos. Trata de revisar bien que los elementos que llames estén definidos.

2
  • En el codigo this.navCtrl.push( Añadir11Page, { "id": note.id, "nombre": note.name });. No me encuentra los parametros note :/ Commented el 9 may. 2018 a las 15:27
  • He editado la respuesta para que te funcione. Si te he servido marcalo como respuesta y cualquier duda me comentas.
    – lDanny7
    Commented el 9 may. 2018 a las 15:48
0

El error está en tu ion-list al entrar a la vista el ngFor intentara recorrer todo el array, antes de que este cargue. Por lo tanto te recomiendo usar ngIf

agrega la siguiente linea y va a funcionar

<ion-list *ngIf="notes">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.