Hola ya conozco el concepto de enviar un componente con ayuda de Input, el problema es quiero enviar datos que estan siendo sacados por medio de un NgFor Mi componente padre es el 'modify.component.ts' y genera una variable de tipo Alumno (es una clase)
Mi 'padre es este' es el que enviara los datos y la variable que enviare sera alumno
export class ModifyComponent implements OnInit {
alumno : Alumno[];
res : number;
show : boolean;
@ViewChild('err')err:ElementRef; //referencia a objeto del html
@ViewChild('help')help:ElementRef;
constructor(private listarService : ListarService) { }
ngOnInit(): void {
this.obternerAlumnos();
}
obternerAlumnos(){
this.listarService.obtenerAlumnos().subscribe(
respuesta => {
this.res = Object.keys(respuesta).length;
if(this.res >= 1){
this.alumno = respuesta;
this.alumno.forEach(a => a.show = false);
}else{
this.err.nativeElement.style.display = 'block';
}
}
);
} }
El html del padre es este:
<form action="submit" class="container-fluid">
<h2>Selecciona que estudiante quieres modificar</h2>
<h2 class="error" style="display: none" #err>-- Sin datos :( --</h2>
<div *ngFor="let a of alumno; let indice = index">
<span class="del">
<ul class="list-group list-group-horizontal">
<li class="list-group-item">{{a.nombre}}</li>
<li class="list-group-item">
<button (click)="a.show = !a.show" type="button">
<i class="material-icons">mode</i>
</button>
</li>
</ul>
<div *ngIf="!a.show; else elseBlock"></div>
<ng-template #elseBlock><app-mod-help [a] = "alumno"></app-mod-help></ng-template>
</span>
</div>
</form>
Con un for recorro el conjunto de 'alumnos' y cuando presiono el botón abre un componente dependiendo cual alumno haya seleccionado, por ejemplo, si imprimo 3 datos y le pico al botón 2, debajo de este se ejecuta el ng-template llamando a mi componente app-mod-help entonces a ese le quiero enviar el 'alumno' de ese índice
Mi componente hijo es el siguiente
export class ModHelpComponent implements OnInit {
@Input() a: Alumno;
constructor() { }
ngOnInit(): void {
console.log(a);
}
}
Y me tira estos errores: