Angular 角度-员工不会出现在组件中

我试图在angular应用程序中显示register employees，但它没有显示值，只创建了他们的数组项，我创建了一个console.log来查看有什么问题，看起来变量未定义。请帮忙

emplbeado.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.nombre}
{{empleado.codigo}
{{emplbeado.posicion}
{{empleado.oficina}

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

  }

}

从'@angular/core'导入{Component，OnInit}；
从“../models/Empleado.model”导入{Empleado}；
从“../services/empleado.service”导入{EmpleadoService}；
@组成部分({
选择器：“app empleado”，
templateUrl:“./empleado.component.html”，
样式URL:['./empleado.component.css']
})
导出类EmpleadoComponent实现OnInit{
雇员：任何[]=[]；
构造函数（public empleadoServ:empleadoServ）{}
恩戈尼尼特（）{
这个。traerEmpleados（）；
console.log（this.empleados.length）；
}
traerEmpleados（）{
this.emplbeadoserv.getemplbeados（）
.订阅（（resp:any）=>{
console.log（resp[0].nombre）；
对于（让索引=0；索引

雇员服务

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

}

从'@angular/core'导入{Injectable}；
从“../models/Empleado.model”导入{Empleado}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs”导入{observatable，throwerr}；
从“rxjs/operators”导入{map，catchError}；
从“sweetalert”进口污水；
@注射的({
providedIn:'根'
})
导出类EmplicatoService{
构造函数（公共http:HttpClient）{}
guardarmpleado（empleado:empleado）：可观察的
为什么在服务中显示警报消息。它应该添加到组件中

console.log in服务是否返回结果？如果是，请使用以下代码进行尝试

组件：

traerEmpleados() {
    this.empleadoServ.getEmpleados()
        .subscribe( (resp: any) => {
          this.empleados = resp;
        });
  }

为什么要在服务中显示警报消息。它应该添加到组件中

console.log in服务是否返回结果？如果是，请使用以下代码进行尝试

组件：

traerEmpleados() {
    this.empleadoServ.getEmpleados()
        .subscribe( (resp: any) => {
          this.empleados = resp;
        });
  }

属性区分大小写

例如，将empleado.nombre更改为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>


{{empleado.Nombre}
{{empleado.Codigo}
{{emplbeado.Posicion}
{{empleado.Oficina}
属性区分大小写

例如，将empleado.nombre更改为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>


{{empleado.Nombre}
{{empleado.Codigo}
{{emplbeado.Posicion}
{{empleado.Oficina}
在标记中，您使用的是小写属性名称：

                <td>{{empleado.nombre}}</td>
                <td>{{empleado.codigo}}</td>
                <td>{{empleado.posicion}}</td>
                <td>{{empleado.oficina}}</td>

{{empleado.nombre}
{{empleado.codigo}
{{emplbeado.posicion}
{{empleado.oficina}

然而在屏幕截图中，从服务器返回的数据对象似乎是大写的

如果您将标记更改为使用大写属性名（
empleado.Nombre
等），我怀疑这会起作用。
在标记中，您使用的是小写属性名：

                <td>{{empleado.nombre}}</td>
                <td>{{empleado.codigo}}</td>
                <td>{{empleado.posicion}}</td>
                <td>{{empleado.oficina}}</td>

{{empleado.nombre}
{{empleado.codigo}
{{emplbeado.posicion}
{{empleado.oficina}

然而在屏幕截图中，从服务器返回的数据对象似乎是大写的

如果您将标记更改为使用大写属性名（
emplbeado.Nombre
，等等），我怀疑这会起作用。
我看到的问题是，在我编写console.log（this.emplbeados[0].Nombre）时，它总是出错，可能是在类型中；它出现在控制台中“未定义”当我写console.log（this.empleados[0].nombre）时，它总是出现错误，我看到的问题，可能是在类型中；它出现在控制台中“undefined”谢谢，它起作用了。我不敢相信这就是问题所在。谢谢，它起作用了。我不敢相信这就是问题所在。