Display array with ngFor

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?

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

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?

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

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

code

I miss row 120:

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

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?

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

Public spieltermin: Array<any> = [];

1 Like

hank you guys! Now it works perfect!

ciao!