Skip to main content
ajuste del codigo
Origen Enlace
ger
  • 1.3k
  • 1
  • 15
  • 40
export class usersListComponent implements OnInit {


@ViewChild(usersDetailsComponent)
 private editusers: usersDetailsComponent;
 usuario = []

private usersEdit: usersDetailsComponent;
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);
 }
}
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 El ejemplo completo lo tengo en stackblitz, vale recordar nuevamente que los datos y los componentes son para muestra.

export class usersListComponent implements OnInit {


@ViewChild(usersDetailsComponent)
 private editusers: usersDetailsComponent;
 usuario = []

private usersEdit: usersDetailsComponent;
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);
 }
}
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.

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

Origen Enlace
ger
  • 1.3k
  • 1
  • 15
  • 40

Traer vista y Ejecutar método del componente Angular

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 = []

private usersEdit: usersDetailsComponent;
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?