0

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?

9
  • El error es que edituserses undefined, por lo que no puedes llamar a ningún método sobre ese valor. Commented el 24 feb. 2021 a las 13:59
  • hola @PabloLozano no entiendo editusers?? yo tengo es getUserEdit y es un metodo, sobre cual valor te refieres?
    – ger
    Commented el 24 feb. 2021 a las 14:22
  • TIenes esta línea: this.editusers.getUserEdit(usuario);. Si this.editusers es undefined, se produce ese error. Commented el 24 feb. 2021 a las 14:23
  • ah entiendo!! ese editusers es la variable del viewChild @ViewChild(usersDetailsComponent) private editusers: usersDetailsComponent;
    – ger
    Commented el 24 feb. 2021 a las 14:27
  • @PabloLozano si tengo definida la variable editusers como un viewChild porque dice que esta undefined??
    – ger
    Commented el 24 feb. 2021 a las 15:27

1 respuesta 1

0

Puedes pasarle el usuario a editar por @Input al app-user-details.

// Intenta poner el nombre de la clase en mayuscula(best practice)
export class UsersListComponent implements OnInit {

  usuarios = []
  selectedUser: any;

  showDetails: boolean;
  mostrarForm: boolean;

  constructor(private _http: HttpClient) {}

  ngOnInit() {
    this._http.get('https://jsonplaceholder.typicode.com/users')
      .subscribe((datos: any[]) => this.usuarios = datos)
  }
  EditarUser(usuario: any) {
    this.showDetails = !this.showDetails
    this.mostrarForm = this.showDetails;
    this.selectedUser = usuario; 
  }
}


export class UsersDetailsComponent implements OnInit {

  constructor() {}

  @Input() usuario: any = {
    firstName: '',
    userName: '',
    email: '',
    webSite: ''
  };

  ngOnInit() {}

}
<app-users-details *ngIf="showDetails" [usuario]="selectedUser"></app-users-details> 

Input

2
  • no pasa información hice tu modificacion en stack blitz pero no funciona, los input estan vacios... he omitido algo? este es el link stackblitz.com/edit/…
    – ger
    Commented el 24 feb. 2021 a las 21:31
  • tenias en app-users-details [usuario]="usuario" lo cambie a **selectedUser ** Gracias!! y si lo de nombrar la clase en mayúscula si lo hago solo que para hacerlo rápido!! es un ejemplo.
    – ger
    Commented el 24 feb. 2021 a las 21:40

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.