Tengo el siguiente código que es mi servicio en Angular:
import { Http, Response, RequestOptions } from "@angular/http";
import { Injectable } from "@angular/core";
import 'rxjs/Rx';
import { Observable } from "rxjs";
import { PedidosModel } from "./pedidos-control.model";
import { AuthService } from "../../homepage/login/auth.service";
import { ClassGetter } from "@angular/compiler/src/output/output_ast";
// import {Headers} from '@angular/http';
@Injectable()
export class PedidosServices {
private pedidos: PedidosModel[] = [];
constructor(
private http: Http,
private loginService: AuthService
){}
private addtoPedidos(pedidoX){
this.pedidos.push(
new PedidosModel(
pedidoX.IdPedido,
pedidoX.FechaPedido,
pedidoX.FechaEntrega,
pedidoX.Total
)
)
}
cargarUltimosPedidos() {
let user = this.loginService.getLoggedUser();
let codCliente;
console.log(codCliente);
console.log(user);
if (user.cedula === 0)
{
codCliente = this.loginService.getCurrentClient();
}
else {
codCliente = user.cedula
}
console.log(codCliente);
if (user){
console.log("entro");
this.pedidos = [];
return this.http.post('http://localhost:40406/api/shoppingCartFunctions/GetPedidosRealizados?IdCliente=' + codCliente, null)
.map((response: Response) => {
let _orders = response.json();
console.log("_ordenes", _orders);
for(let pedidoX of _orders){
this.addtoPedidos(pedidoX);
console.log("pedi", this.pedidos);
}
return this.pedidos;
})
.catch((error: Response) => Observable.throw(error.json()));
}
this.loginService.backToHome();
}
}
En mi componente en el ngOnInit llama este método para poder mostrarlo en el .html
COMPONENTE
ngOnInit() {
// this.pedidosServices.cargarUltimosPedidos();
this.pedidosServices.cargarUltimosPedidos()
.subscribe(
data => {
this.pedidosLista = data;
console.log(this.pedidosLista);
}
);
}
HTML
<table class="table tablaPedidosLista">
<thead class="thead-dark">
<tr>
<th scope="col"># Pedido</th>
<th scope="col">Fecha Pedido</th>
<th scope="col">Fecha Entrega</th>
<th scope="col">Total</th>
<th scope="col">Acciones</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of pedidosLista">
<td>{{item.IdPedido}}</td>
<td>{{item.FechaPedido}}</td>
<td>{{item.FechaEntrega}}</td>
<td>{{item.Total}}</td>
<td style="white-space: nowrap">
<button type="button" class="btn btn-success editarUsuario modalUsuarios" data-id={{item.IdPedido}} data-toggle="modal" data-target="#modal-editarUsuario">Editar</button>
<button type="button" class="btn btn-danger resetPassword">Reenviar contraseña</button>
</td>
</tr>
</tbody>
</table>
En el navegador cuando hago console.log
de
let _orders = response.json();
console.log("_ordenes", _orders);
me muestra los siguiente: (lo que quiere decir que hasta aca trae datos)
Pero cuando en el for
siguiente:
for(let pedidoX of _orders){
this.addtoPedidos(pedidoX);
console.log("pedi", this.pedidos);
}
Trato de mostrar this.pedidos justo después de agregarlo al array, me sale los siguiente, como si no se hubiera agregado nada:
Se que mi problema lo tengo en el for
(creo), que es la parte que estoy haciendo mal ahi?