0

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...

2
  • 1
    Estaba escribiendo una muy inspirada respuesta pero me falta algo de información. Por la lógica de la palabra filter me supongo que estás haciendo un filtro del arreglo, o eso intentas. Creo que de ahí viene el error. Ese pipe no te está devolviendo un arreglo. Podrias publicar el código del mismo?
    – Legna
    el 20 may. 2019 a las 13:37
  • gracias por su tiempo :) ese filter proviene de como bien lo menciona un filtro hacia el arreglo, es independiente y forma parte de del ecosistema de bootstrap por eso no lo puse como parte del codigo ya que quedaba muy extenso, puede resolver el problema al final, en un momento publico la respuesta para ayudar a quién en su momento tengan un problema parecido, muchas gracias. el 21 may. 2019 a las 1:55

1 respuesta 1

0

El problema radicaba en la manera en que estaba ligando el modelo con la vista, como tal el objeto no se podía iterar sin previamente haber hecho un append (push) al arreglo, es algo extraño ya que lógicamente tenia una asignación del valor del objeto (en formato json) al arreglo, eso debería haberme dado el resultado correcto desde un inicio, pero no se si tenia que ver que el arreglo previamente tenia ya datos insertados en el .ts y lo que ocupaba simplemente era un append en lugar de una asignación, en fin esto me ayudo:

ngOnInit() {
        this.activeRoute.queryParams.subscribe(queryParams => {
            alert(JSON.stringify(queryParams));
            this.viajesC.push(JSON.parse(queryParams.arregloViajes));
            console.log(this.viajesC);
        });
      }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.