Can not read property 'name' of undefined

Question

Can not read property 'name' of undefined

Navigation

#1 by (0 votes)

0

I'm creating an app on ionic It is an assistance app that has a service. And the html contains an ngfor and a {{note.name}} and when clicking on the names, I returned the error can not read property 'name' undefined

Here I leave the code 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 );
}

}

and the service:

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

}

Add 11Page

<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>

Add11 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) {
}
}

ionic angular ionic3

asked by Nahuel Akeen Reymundo 09.05.2018 в 03:11

source

1 answer

React-Native TypeError is not a function (evaluating_firebase How to use JInternalFrame in an enum?

score 0 · Answer 1

I already sensed that you used the variable note on the page Add11. What you have to do is pass as a parameter the note you want when doing push. Example:

public up (note) { this.navCtrl.push (Add11Page, { "id": note.id, "name": note.name }); }

And in the Add11 driver recover the data as follows:

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

You have to change this in the html:

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

Remember that you have to pass the parameters these are not passed alone. Try to check well that the elements you call are defined.