Table doesn´t show data in Angular 14-CodePudding

I have a front on Angular 14 and a backend in .net core, the table is not showing any data. I have tested the backend and the data is coming, in fact the console.log shows:

0: {idDetalle: 1, nombreArticulo: 'Balón', cantidadArticulo: 3, idPedido: 1, pedidos: null}
length: 1
[[Prototype]]: Array(0)

ts code:

idPedido!: number;  
  detalles: IDetalles[] = [];       

  constructor(private route: ActivatedRoute, private router: Router, public dataService: DataService) { }

  ngOnInit(): void {
    this.idPedido = this.route.snapshot.params['id'];
    this.dataService.GetDetallePorIdPedido(this.idPedido).subscribe((data: IDetalles[])=>{
      console.log(data);
      this.detalles = data;               
    });          
  }

html code:

<div >   

    <div >        
        <div  style="width: 18rem; padding: 10px; margin: 40px;">            
            <div >
              <h5 >DETALLES</h5>                                          
              <a  [routerLink]="['/nuevo-detalle']" routerLinkActive="active">Nuevo Detalle</a>              
            </div>
          </div>
    </div>
    

    <div *ngIf="detalles">
        <div >
            <table  style="width:100%; margin: 40px;">
                <thead >                    
                    <th>Nombre del Artículo</th>
                    <th>Cantidad del Artículo</th>
                    <th>Id del Pedido</th>                    
                    <th style="width:100px;">Actions</th>
                </thead>
                <tbody>
                    <tr *ngFor="let item of detalles">
                        <td>{{item.NombreArticulo}}</td>
                        <td>{{item.CantidadArticulo}}</td>
                        <td>{{item.IdPedido}}</td>                            
                        <td><a  [routerLink]="['/editar-detalle', item.IdDetalle]" routerLinkActive="active">Editar</a></td>                                                
                        <!-- <td><button type="button" (click)="eliminarDetalle(item.IdDetalle)" >Borrar</button></td>      -->
                    </tr>
            </table>
        </div>
    </div>

Outside the if I put, just for testing, this is not a part of the final program:

{{detalles[0].NombreArticulo}}

And it shows: Cannot read properties of undefined

Something is happening.. its like the array is not getting filled with the data.

In postman

http://localhost:25390/api/GetDetallePorIdPedido/1

shows

[
    {
        "idDetalle": 1,
        "nombreArticulo": "Balón",
        "cantidadArticulo": 3,
        "idPedido": 1,
        "pedidos": null
    }
]

CodePudding user response：

You are trying to display the data before it has come back from the server. *ngIf checks for a truthy value and and empty array evaluates to true.

You could subscribe to an observable and that way you will only see the table data once it has returned from the server or the data gets updated.

@Component({})
export class TableComponent {
  detalles = new Subject<IDetalles[]>();
  detalles$ = this.detalles.asObservable();

  ngOnInit(): void {
    this.idPedido = this.route.snapshot.params['id'];
    this.dataService.GetDetallePorIdPedido(this.idPedido)
      .subscribe((data: IDetalles[]) => this.detalles.next(data));          
  } 
}

Then we change the *ngIf to watch the observable:

    <div *ngIf="detalles$ | async as data">
       <!-- The data is ready now! -->
       <tr *ngFor="let item of data">
         <!-- Your cells -->
       </tr>
       {{data[0] | json}}
    </div>

Also as noted here, you are using the wrong case for your property name.

CodePudding user response：

Your console log shows the object with properties in camel case. But you are trying to access in template with Pascal case.

item.NombreArticulo -> item.nombreArticulo.