Display array with ngFor


#1

I have a async function that generats an array:

service:

async getSpieltermineList(){
   
   
   let anwesenheit = [] ;
   let spieltermin = [];


 this.anwesenheit  = this.afs.collection('anwesenheit')
   await this.anwesenheit.ref.where('email','==','te@te.de').get().then((results) => {
     results.forEach((doc) => {
       anwesenheit[doc.data().spielterminName] = doc.data();
     });
   
     this.spieltermin = this.afs.collection('spieltermin')
      this.spieltermin.ref.orderBy('adresse', 'desc').limit(3).get().then((docSnaps) => {
             docSnaps.forEach((doc) => {
                spieltermin[doc.id] = doc.data();
                spieltermin[doc.id].status = anwesenheit[doc.data().name].status;
     });
    }); 
   })
      return spieltermin;
  }

I call the function like this:

 spieltermin = [];

this.ss.getSpieltermineList().then(spieltermin =>{
this.spieltermin = spieltermin;

 console.log(this.spieltermin)

 })


console.log gives me back this array:

But when i am trying to display the array in a list nothing happens.

<ion-list>
    
        <ion-item *ngFor="let s of spieltermin" (click)="selectSpieltermin(s.musikgruppe,s)" >
           
          <h2> {{s.name}}</h2>
                   
        </ion-item>
      </ion-list>

What i am doing wrong?


#2

The template displays the array upon page construction, which is empty.


#3

hm okay, so my function “getSpieltermineListe” is wrong.

With this function i try to make a join with two data-container (firebase collections).
The last line`

 "spieltermin[doc.id].status = anwesenheit[doc.data().name].status"`

add a value to the array “spieltermin[]”

Any idea how i can change this action to return a correct array?


#4

Are you sure it is wrong? What does console.log say after the await completes?


#5

Below the concreate code-lines with the console.log output:


#6

I miss row 120:


#7

Perhaps the problem is that you use strings as index.

try to push the data to the array, for example.

spieltermin.push({id: doc.id, data: doc.data})

Then you get something like this.

An array of objects.

Take a look at the length value in your screenshots. It is 0. In my Screenshot it is 2.

grafik


#8

yeeeh, thank you so much!

with this edit the array looks better.

   
 let anwesenheit = [];
 let spieltermin = [];
 let placeholder = [];
...
      this.spieltermin = this.afs.collection('spieltermin')
      this.spieltermin.ref.orderBy('adresse', 'desc').limit(3).get().then((docSnaps) => {
             docSnaps.forEach((doc) => {
                    placeholder[doc.id] = doc.data();
                    placeholder[doc.id].status = anwesenheit[doc.data().name].status;
                    spieltermin.push({id: doc.id, data: placeholder[doc.id]})

finaldata

Now I am trying to return this array with the async function.

spieltermin: any = []

this.ss.getSpieltermineList().then(spieltermin =>{
this.spieltermin = spieltermin;
console.log(spieltermin)

 }) 

but the result of the console.log is “undefined”.
Is this approach right?
Is the definition “spieltermin: any = []” right?


#9

Your definition of the arry is wrong.
Try for example.

Public spieltermin: Array<any> = [];


#10

hank you guys! Now it works perfect!

ciao!