Error iterating over array with ngFor

1

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

    
asked by Alejo Mendoza 04.12.2018 в 06:37
source

1 answer

1

* ngFor only works with arrays and not with objects.

var objetoNombre = []; // Intentar recorrer este objeto con ngFor produce un error
var arrayNombres = {}: // Esto es un array
    
answered by 04.12.2018 / 16:49
source