angular - How to display a table of data without waiting for the end of a function

Question

i am not fluent at speaking in english so excuse me for my bad english.

I am trying to display data one by one without waiting for the end of the method which is populating an array (that i want to display).

Here is the controller:

async fork (note : Note) : Promise<Observable<void>> {
    //this is the array i want to populate
     this.searchedGamme = [];
    
    //this is the function populating my array
    this.getGammeByNoteList(this.selectedNotes)
    return;
  }

getGammeByNoteList(notes : Note[]) {
   var scales = this.allGamme.scales;
   scales.forEach(s => {
      s.gammes.forEach(g => {
      if (this.findNotes(g, notes) === true)
        this.searchedGamme.push(g)
      })
    })
   
  }

Here is my Html:

<mat-card class="col-8 m-3 shadow-lg " *ngFor="let gamme of searchedGamme">
  <mat-card-title class="text-center d-flex justify-content-center">
        {{gamme.libelle}}
  </mat-card-title>
</mat-card>

So basically i want every entry of the array to be displayed one by one instead of waiting for the full array to load.

Thank you ! :)

Answer 1

等待大神答复