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:
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
ngFor
y el código javascript que asigna el valor deitems
.