1

Intento iterar un arreglo utilizando lo siguiente *ngFor="let item of items", sabiendo que ngFor se utiliza para iterar sobre arreglos de varias matrices, si hago una consulta por que me devuelva por ejemplo: las materias que tiene inscritas un alumno, sabiendo que el alumno puede tener inscritas 1 o muchas carreras.

En el caso de que tenga inscritas mas de 1 materia no hay problema en utilizar ngFor, pero si el alumno tiene inscrita 1 sola carreras, que es el caso que me esta sucediendo, ngFor genera un error que dice que solo puede iterar sobre arreglos de varias matrices.

Como podría solucionar este problema, ya que esta consulta como he dicho me devuelve en formato json mi arreglo pero puede contener 1 o varios elementos.

De que manera puedo utilizar el ngFor para iterar sobre el arreglo asi traiga 1 o varios elementos?

Si mi arreglo viene así el ngFor funciona:

[
 {
 "userId": 1,
 "title": "medicina",
 "status": 1
 },
 {
 "userId": 1,
 "title": "informatica",
 "status": 1
 }
]

Pero si viene así el ngFor no funciona:

[
 {
 "userId": 1,
 "title": "informatica",
 "status": 1
 }
]

Y el error que muestra es el siguiente:

error trying to diff. only arrays and iterables are allowed

Muestro el arreglo en console y es el siguiente:

introducir la descripción de la imagen aquí

Este arreglo es cuando un estudiante tiene una sola carrera inscrita

El metodo que trae los datos y los mete en items en mi archivo .ts es el siguiente

 public items:any=[];

 datosAcademicosUser() {
  let data:Observable<any>;
  data = this.http.getData(this.userDetails.id,"get/datauser");
  data.subscribe( result => {
   this.items = result;
  }, (err) => {
   console.log(err);
  });
 }

El codigo html es el siguiente

<ion-card-content *ngFor="let item of items">
  <ion-grid>
    <ion-row>
      <ion-col col-12>
        <button ion-button full block small round color="dark">{{item.NombCar}}</button>
      </ion-col>
     </ion-row>
   </ion-grid>
   <p *ngIf="item.status==1; else inactivo" style="color:crimson;font-weight: bold;text-align: center">
     Tienes inscripción activa
   </p>
   <ng-template #inactivo>
    <p style="color:crimson;font-weight: bold;text-align: center">Inactivo</p>
   </ng-template>
</ion-card-content>

El arreglo en formato json es el siguiente:

[
 {
  "id_inscripcion":"1",
  "0":"1",
  "estudiante_id":"1",
  "1":"1",
  "carrera_id":"192",
  "2":"192",
  "indice":"3.90",
  "3":"3.90",
  "status":"1",
  "4":"1",
  "turno":"Diurno",
  "5":"Diurno",
  "sede":"1",
  "6":"1",
  "condicion":"RG",
  "7":"RG",
  "uc_aprobadas":"150",
  "8":"150",
  "CodCar":"192",
  "9":"192",
  "NombCar":"INGENIERIA INFORMATICA",
  "10":"INGENIERIA INFORMATICA",
  "codVice":"1",
  "11":"1",
  "ciudad":"Barinas",
  "12":"Barinas"
 }
]

Estoy utilizando angular 6

11
  • Alejo, estas haciendolo en angularjs(1) o en angular (2+)? Pon el código de ejemplo, por favor. En angular1 sería ng-repeat, no *ngFor
    – osiris85
    el 4 dic. 2018 a las 7:35
  • Estás seguro de que cuando tienes un único valor es un array? ngFor funciona perfectamente incluso con 0 valores (no mostrando nada) o 1 valor (se produce una iteración) el 4 dic. 2018 a las 8:27
  • 1
    por favor crea un ejemplo mínimo verificable, así podemos descartar que haya algún problema relacionado el 4 dic. 2018 a las 8:46
  • Hola Alejo. El primer JSON está mal formado (falta una coma entre ambos valores de la matriz). ¿Podrías compartir tanto el HTML que usa el ngFor y el código javascript que asigna el valor de items. el 4 dic. 2018 a las 9:04
  • 1
    @jecorrales corregi la respuesta del servidor y he tomado el consejo de la respuesta de ivan.depi. Funcionando como debe ser.! Gracias el 4 dic. 2018 a las 16:48

1 respuesta 1

1

*ngFor solo funciona con arrays y no con objetos.

var objetoNombre = []; // Intentar recorrer este objeto con ngFor produce un error
var arrayNombres = {}: // Esto es un array
0

Tu Respuesta

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

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