Qfyilyi

I'm trying to show register employees in my angular app, but it doesn't appear the values, only creates their items of the array, i make a console.log to see what's wrong and it looks like to be the variables are undefined. Help please

empleado.component.html

<div class="row animated fadeIn">

  <div class="col-12">

      <div class="card">

          <div class="card-body">

              <h3 class="card-title"> Empleados registrados  </h3>



              <table class="table table-hover" >

                <thead>

                  <tr>

                    <th>Nombre</th>

                    <th>Codigo</th>

                    <th>Posicion</th>

                    <th>Oficina</th>

                    <th></th>  

                  </tr>

                </thead>

                <tbody>

                  <tr *ngFor="let empleado of empleados">

                    <td>{{empleado.nombre}}</td>

                    <td>{{empleado.codigo}}</td>

                    <td>{{empleado.posicion}}</td>

                    <td>{{empleado.oficina}}</td>

                    <td>

                      <button class="btn btn-primary"> <i class="fa fa-save"></i></button>

                      <button class="btn btn-danger"> <i class="fa fa-trash-o"></i></button>

                    </td>

                  </tr>

                </tbody>

              </table>



          </div>

      </div>

  </div>

</div>

empleado.component.ts

    import { Component, OnInit } from '@angular/core';

import { Empleado } from '../models/empleado.model';

import { EmpleadoService } from '../services/empleado.service';



@Component({

  selector: 'app-empleado',

  templateUrl: './empleado.component.html',

  styleUrls: ['./empleado.component.css']

})

export class EmpleadoComponent implements OnInit {



  empleados: any = ;



  constructor(public empleadoServ: EmpleadoService) { }



  ngOnInit() {

    this.traerEmpleados();

    console.log(this.empleados.length);

  }



  traerEmpleados() {

    this.empleadoServ.getEmpleados()

        .subscribe( (resp: any) => {

          console.log(resp[0].nombre);



            for (let index = 0; index < resp.length; index++) {

              this.empleados[index] = resp[index];

              console.log(this.empleados[index]);

            }

            // JSON.stringify(this.empleados);

            console.log(this.empleados[0].nombre);

        });



  }



}

empleado.service.ts

    import { Injectable } from '@angular/core';

import { Empleado } from '../models/empleado.model';



import { HttpClient } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';

import { map, catchError  } from 'rxjs/operators';





import swal from 'sweetalert';



@Injectable({

  providedIn: 'root'

})

export class EmpleadoService {



  constructor(public http: HttpClient) { }



  guardarEmpleado(empleado: Empleado): Observable<any> {

      return this.http.post('http://localhost:62200/api/Empleado', empleado)

                 .pipe(

                   map( (resp: any) => {

                    swal('Empleado creado', empleado.nombre, 'success');

                    return empleado;

                   }),

                   catchError((e: any) => throwError(e))

                 );

  }





  getEmpleados()  {

    return this.http.get('http://localhost:62200/api/Empleado');

  }



  borrarEmpleado(id: number): Observable <any> {

    return this.http.delete('http://localhost:62200/api/Empleado/' + id)

                 .pipe(

                   map( (resp: any) => {

                    swal('Empleado eliminado', 'Borrado', 'warning');

                    return resp;

                   }),

                   catchError((e: any) => throwError(e))

                 );

  }



}

And when i try to show employees, it creates the items but it doesn't show the name, code, position, office.

In your markup, you are using lowercase property names:

                <td>{{empleado.nombre}}</td>

                <td>{{empleado.codigo}}</td>

                <td>{{empleado.posicion}}</td>

                <td>{{empleado.oficina}}</td>

Yet in the screenshot, it seems the data objects returned from the server are in uppercase.

If you change your markup to use the uppercase property names (empleado.Nombre, etc.) I suspect that will do the trick.

Properties are case sensitive

For example change empleado.nombre to empleado.Nombre

 <tr *ngFor="let empleado of empleados">

                    <td>{{empleado.Nombre}}</td>

                    <td>{{empleado.Codigo}}</td>

                    <td>{{empleado.Posicion}}</td>

                    <td>{{empleado.Oficina}}</td>

                    <td>

                      <button class="btn btn-primary"> <i class="fa fa-save"></i></button>

                      <button class="btn btn-danger"> <i class="fa fa-trash-o"></i></button>

                    </td>

                  </tr>

why are you displaying alert msg in Service. It should be added in Component.

did console.log in service returns result? If yes, try with below code.

Component:

traerEmpleados() {

    this.empleadoServ.getEmpleados()

        .subscribe( (resp: any) => {

          this.empleados = resp;

        });

  }