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) {
}
}
Añadir11
no tiene una propiedadnote
que bindear. PD: No uses nunca caracteres especiales comoñ
por cuestión de compatiblidad y buenas prácticas.