la cuestión es que quiero comunicar 2 componentes en angular, eh decidido pasar por parámetro un arreglo proveniente de una interfaz, al momento de pasar los datos va to bien, me pinta los datos en la barra de direcciones e incluso si hago una alert del arreglo en stringify me muestra bien los datos como normalmente se mostrarían; ahora bien, el problema radica a la hora de recibirlos y mostrarlos en el DOM. Me marca el siguiente error:
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3368)
Se supone que para poder mostrar los datos de mi arreglo en el DOM, tengo que iterarlos con un *ngFor, para esto primeramente deben de ser un objeto (de tal manera que convertí el resultado del otro componente en objeto con un JSON.parse), pero no me funciona, me marca mencionado error.
Alguien podría ayudarme? llevo horas con esto y siento que es algo muy sencillo, solo que soy nuevo en Angular.
código de mi modulo emisor (resumido a las partes clave):
interface IViajesConcluidos{
idViaje: number;
cliente: string;
conductor: string;
descripcion: string;
costo: number;
fechaRegistro: string;
fechaEntrega: string;
estatusPago: string;
}
export class ViajesProgramadosComponent implements OnInit {
//VARIABLES GENERALES
public arregloViajes: IViajesConcluidos[];
public usuarioObtenido:string;
public closeResult: string;
public modal: NgbModalRef;
//VARIABLES PARA EL FORMULARIO
public frmViajes: FormGroup;
public formValid:Boolean=false;
constructor(private modalService: NgbModal, public formBuilder: FormBuilder, public formatoFecha: DateFormatService,public router:Router) {
//DATOS DE INICIO
this.arregloViajes=[];
//INICIALIZACION (CONSTRUCCION) DEL FORMGROUP
this.frmViajes = this.formBuilder.group({
cliente:["",Validators.required],
descripcion:["",Validators.required],
costo:["",Validators.required]
});
}
//PASO LOS DATOS POR PARAMETRO
pasarDatos(idViaje:number){
alert(idViaje);
let registro = this.arregloViajes[idViaje-1];
this.router.navigate(['/viajes-concluidos'],{queryParams:{arregloViajes: JSON.stringify(registro)}});
this.arregloViajes.splice(idViaje,1);
}
ngOnInit() {
this.obtenerLocalStorage();
this.generarFecha();
}
}
Código de mi receptor (Aqui es donde siento que esta el problema):
interface IViajesConcluidos{
idViaje: number;
cliente: string;
conductor: string;
descripcion: string;
costo: number;
fechaRegistro: string;
fechaEntrega: string;
estatusPago: string;
}
export class ViajesConcluidosComponent implements OnInit {
public viajesC: IViajesConcluidos[];
public usuarioObtenido:string;
public viajes:Array<any>;
constructor(public router:Router, public activeRoute:ActivatedRoute ) {
this.viajesC=[];
this.viajesC.push(
{idViaje:5,cliente:'Juan',conductor:"Miguel Diaz",descripcion:"Es fragil",costo:1000,fechaRegistro:'12-05-2019',fechaEntrega:'18-05-2019',estatusPago:'pagado'}
);
//this.viajes.push({idViaje:2,cliente:'Pedro',conductor:"Jose Diaz",descripcion:"Es fragil",costo:2000,fechaRegistro:'12-06-2019',fechaEntrega:'10-06-2019',estatusPago:'pagado'});
}
//AQUI SE PRESENTA EL PROBLEMA
ngOnInit() {
this.activeRoute.queryParams.subscribe(queryParams => {
alert(JSON.stringify(queryParams)); //ME IMPRIME BIEN LOS DATOS EN EL ALERT
this.viajesC = JSON.parse(queryParams.arregloViajes); //ESTA PARTE ES LO QUE NO FUNCIONA
});
}
}
DOM (La sección del *ngFor):
<table id="customers" border="1" class="w3-table-all w3-hoverable">
<tr class="w3-black">
<th>ID Viaje</th>
<th>Cliente</th>
<th>Conductor</th>
<th>Descripcion</th>
<th>Costo $MXN</th>
<th>Fecha Registro</th>
<th>Fecha Entrega</th>
<th>Estatus de pago</th>
</tr>
<tbody id="idTabla" *ngFor="let i of viajesC | filter:term">
<tr>
<td>
{{i.idViaje}}
</td>
<td>
{{i.cliente}}
</td>
<td>
{{i.conductor}}
</td>
<td>
{{i.descripcion}}
</td>
<td>
{{i.costo}}
</td>
<td>
{{i.fechaRegistro}}
</td>
<td>
{{i.fechaEntrega}}
</td>
<td>
{{i.estatusPago}}
</td>
</tr>
</tbody>
</table>
...MUCHAS GRACIAS DE ANTEMANO...
filter
me supongo que estás haciendo un filtro del arreglo, o eso intentas. Creo que de ahí viene el error. Esepipe
no te está devolviendo un arreglo. Podrias publicar el código del mismo?