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][1]) 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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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> 

<!-- end snippet -->

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][2], 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?


  [1]: https://es.stackoverflow.com/a/326939/24490
  [2]: https://stackblitz.com/edit/ejecutar-metodo-vwchild-con-referencia-de-elemento?file=src/app/users-details/users-details.component.ts