Tengo un Componente lista que me llama un componente detalle que sirve para Mostrar los datos que están en la lista y poder modificarlos o actualizarlos.
Para esto utilice ViewChild de referencia de elemento (ver este link) así como para Mostrar el Detalle y ocultar la lista; el Detalle debe mostrarme el form de los datos en cada input y poder modificarlo.
el componente lista (vale Aclarar que estoy utilizando este código como ejemplo) lo tengo de la siguiente forma:
export class usersListComponent implements OnInit {
@ViewChild(usersDetailsComponent)
private editusers: usersDetailsComponent;
usuario = []
showDetails: boolean;
mostrarForm: boolean;
constructor(private _http : HttpClient) { }
ngOnInit() {
this._http.get('https://jsonplaceholder.typicode.com/users')
.subscribe((datos: any[]) => this.usuario = datos)
}
EditarUser(usuario: any){
this.showDetails = !this.showDetails
this.mostrarForm = this.showDetails;
this.editusers.getUserEdit(usuario);
}
}
tengo el metodo EditarUser que me muestra o no las vistas, y me llama el metodo del viewChild getUserEdit(param)
en el html:
<table class="table table-hover" *ngIf="!mostrarForm">
<thead>
<tr>
<th>Firstname</th>
<th>user name</th>
<th>Email</th>
<th>WebSite</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let user of usuario">
<td>{{user.name}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.website}}</td>
<td>
<button id="btnEditar" (click)="EditarUser(user)">Edit</button>
</td>
<td>
<button id="btnBorrar">Borrar</button>
</td>
</tr>
</tbody>
</table>
<app-users-details *ngIf="showDetails"></app-users-details>
En el componente Editar se tiene la siguiente forma...
export class usersDetailsComponent implements OnInit {
constructor() { }
lstUser: any ={
firstName: '',
userName: '',
email:'',
webSite:''
};
ngOnInit() {
}
getUserEdit(usr){
this.lstUser.firstName = usr.name
this.lstUser.userName = usr.username
this.lstUser.email = usr.email
this.lstUser.webSite =usr.website
}
}
El ejemplo completo lo tengo en stackblitz, vale recordar nuevamente que los datos y los componentes son para muestra.
En el ejemplo me indica el siguiente error: ERROR Error: Cannot read property 'getUserEdit' of undefined y no trae los datos de la lista a los detalles.
en mi proyecto, no TRAE los datos de la lista a los detalles... esta mostrando el formulario detalle pero no los datos! Que error o que me esta faltando para que funcione, y me lleve los datos de la lista al detalle?
editusers
es undefined, por lo que no puedes llamar a ningún método sobre ese valor.this.editusers.getUserEdit(usuario);
. Sithis.editusers
es undefined, se produce ese error.