0

Tengo un problema con Angular y Typescript con los Arrays y venía a ver si alguien me podía ayudar.

Tengo un backend con Node conectado con SQL cuyo método obtenerPasajeros hace un SELECT * FROM pasajeros (una tabla con columnas id y nombre) y lo devuelve al frontend:

obtenerPasajeros: function(req, res){

var queryString = "SELECT id FROM pasajeros";

con.query(queryString, function(err, pasajeros, fields){

  if(err) throw err;

  return res.status(200).send({pasajeros})

});}

Luego tengo un servicio en el frontend cuyo método obtener pasajeros hace la petición get al backend:

obtenerPasajeros(){
    let headers = new HttpHeaders().set('Content-Type', 'application/json');
    return this._http.get(this.url+'obtener-pasajeros',{headers: headers});
}

Finalmente desde el .ts del componente creo un método que consume el servicio mediante el método obtenerPasajeros() anterior y se suscribe para recibir la respuesta (haciendo un console.log de lo que recibe):

Método

En el navegador el console.log devuelve un Array:

{pasajeros: Array(9)}

Al recibirlo, asigno el result a una variable pasajeros de tipo any:

  public pasajeros: any; 

Y al tratar de recorrer esa variable en el ngFor, me salta el siguiente error:

      <select class="form-control" name="id" id="ngModel" [(ngModel)]="selectedPasajero">
    <option *ngFor="let p of pasajeros" [ngValue]="p">{{p}}</option>
  </select>

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

¿Cómo puede estar interpretando que no es un array? o formulado de otra forma, ¿cómo puedo asignarlo a una variable que pueda ser recorrida por el ngFor y pueda asignarle sus valores al select?

PD: Lo siento por los posibles errores pero es mi primera vez en el foro. Un saludo.

5
  • En la parte que dice this.pasajeros = response cambialo a this.pasajeros = response.pasajeros porque como esta ahora le asignabas el objetos reponse que no es admitido por el ciclo. el 20 dic. 2018 a las 1:47
  • @denifersantiagofernandez Si pongo response.pasajeros me salta un error diciendo: "Property 'pasajeros' does not exist on type 'Object'" y no me lo acepta, ya lo probé anteriormente y no me funcionaba, por eso pregunté. :(
    – Nelo
    el 20 dic. 2018 a las 2:32
  • Intenta declarar pasajeros como array en vez de poner any el 20 dic. 2018 a las 2:36
  • Tal vez te sirva la referencia el 20 dic. 2018 a las 2:37

1 respuesta 1

0

si le pones tipo any a la variable response del subscribe() typescript ya no se queja, porque por defecto si le pones tipo Object a una variable el compilador lo evalua siempre como un objeto vacio, da igual lo que lleve dentro.

En resumen, cambia el subscribe a esto:

this._pasajerosService.obtenerPasajeros().subscribe(
    (response:any)=>{
        this.pasajeros = response.pasajeros
    }
    (error:any)=>{
        console.log(error)
    }
)

Pruebalo y nos cuentas :)

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.