0

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:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

1 respuesta 1

0

El problema que veo esta acá

<ng-template #elseBlock><app-mod-help [a] = "alumno"></app-mod-help></ng-template>

justo en [a]="alumno" en el for tu declaras let a of alumno entonces el código debería ser

<ng-template #elseBlock><app-mod-help [a]="a"></app-mod-help></ng-template>

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.