I try to iterate an array using the following *ngFor="let item of items"
, knowing that ngFor is used to iterate over arrays of several arrays, if I make a query because it returns me for example: the subjects a student has enrolled, knowing that the student You can have 1 or many races enrolled.
In the event that you have more than 1 subject registered, there is no problem in using ngFor, but if the student has only 1 career registered, which is the case that is happening to me, ngFor generates an error that says that it can only iterate about arrays of several matrices.
How could I solve this problem, since this query as I said it returns me in json format but it can contain 1 or several elements.
How can I use the ngFor to iterate over the array so bring 1 or more elements?
If my fix comes like this the ngFor works:
[
{
"userId": 1,
"title": "medicina",
"status": 1
},
{
"userId": 1,
"title": "informatica",
"status": 1
}
]
But if it comes like this the ngFor does not work:
[
{
"userId": 1,
"title": "informatica",
"status": 1
}
]
And the error it shows is the following:
error trying to diff. only arrays and iterables are allowed
I show the arrangement in console and it is as follows:
This arrangement is when a student has only one career enrolled
The method that brings the data and puts it into items in my .ts file is as follows
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);
});
}
The html code is as follows
<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>
The arrangement in json format is as follows:
[
{
"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"
}
]
I'm using angular 6