Fetching firebase data on page load, data showing in console but not in html

Question

I'm fetching an array of data from a firebase document, it's console logging but not showing on the front end. I am using async, awaits and the value to indicate that the data is loaded (doneLoading) is also returning true; however it is not displaying on the front end.

Also, if a change were to occur where another value is added to the array, is the ngOnChanges function handling that correctly?

.ts file

  async ngOnInit() {
  
   this.adminCode = this.route.snapshot.params["adminCode"];
   await this.listForms(this.adminCode);
   this.doneLoading = this.checkArr();
   console.log(this.formArray)
   console.log(this.doneLoading + 'doneLoading?')
  }

  ngAfterViewInit(): void {

  }


  ngOnChanges(changes: SimpleChanges) {
    const mainDataChange = changes['formArray'] ;
    if (mainDataChange) {
      this.formArray = mainDataChange.currentValue;
      //this.sortedData = this.dataArray;
  }
}


checkArr(){
  debugger
  if(this.formArray?.length > 0){
    return true
  }
  else{
    return false
  }
}

 async listForms(adminCode: string){
  this.doneLoading = false;
  const forms =  await this.fireCustomAssessment.readAdminAssessmentList(adminCode)
    .get()
    .toPromise()
    .then((doc) => {
     this.data = doc.data();
     this.formArray = this.data?.formArray;
     console.log(this.formArray)
    })
    this.doneLoading = true;
    return forms;
  }

.html file

<section>
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th>Form name</th>
        </tr>
      </thead>
      <tbody>
        <div *ngIf="doneLoading == false">Loading... If data doesn't show, then you have no data yet.</div> 
         <div *ngIf="doneLoading == true">
            <tr *ngFor="let formName of formArray">
              <td>
                {{formName}}
              </td>
              <td>
                <button class="button" mat-raised-button (click)="goToForm(formName)">Take Assessment</button>
              </td>
            </tr>
      </div>  
      </tbody>
    </table>
    </div>
</section>

Y_Moshe · Answer 1 · 2023-02-02T16:00:15.910

0

you should see this: async/await in Angular `ngOnInit`

ngOnInit(): void = should return void and when u declare with async it returns a promise, you can still use async await just declare a async function in the class and call if in ngOnInit

EDIT
try to do the following:

ngOnInit(): void {
  this.loadFormsList()
}

async loadFormsList() {
  this.adminCode = this.route.snapshot.params["adminCode"];
  await this.listForms(this.adminCode);
  this.doneLoading = this.checkArr();
  console.log(this.formArray)
  console.log(this.doneLoading + 'doneLoading?')
}

and btw, note that in listForms method, set the doneLoading in a finally catch..

edited Feb 02 '23 at 16:00

answered Feb 02 '23 at 06:07

Y_Moshe

424
1
5
11

Thanks, read the documentation, it says its not best practice, so I don't need to use it if there is another solution (not sure what the alternative is). But if it is necessary to use async with ngOnIt for the data to load, to your point, this.listForms(this.adminCode) is an async function and I'm already calling it in ngOnInit, is that what you mean? – TSH Feb 02 '23 at 14:15
see Edited answer, also i do not understand what's the purpose of doneLoading, u using it for "fetch" feedback i guess, but then u do `this.doneLoading = this.checkArr()`.. which complicated the case, in short terms u using one variable for two cases.. – Y_Moshe Feb 02 '23 at 16:07
Ok gotcha, though even with commenting out all doneLoading conditions, the FormArray is still showing only in the console log but not the front end. Data structure image added – TSH Feb 02 '23 at 17:30
then it's probably ngOnChanges does that, u should check that – Y_Moshe Feb 02 '23 at 21:27

score 0 · Accepted Answer · answered Mar 14 '23 at 22:52

I had to add a bunch of async and awaits

 
  async ngOnInit(): Promise<void> {
   await  this.loadFormsList();
   this.doneLoading = this.checkArr();
   this.changeDetectorRef.detectChanges();
  }
  
  async loadFormsList() {
    this.adminCode = this.route.snapshot.params["adminCode"];
    await this.listForms(this.adminCode);
    this.formArray = this.dataArray;
    return 
  }

  ngOnChanges(changes: SimpleChanges) {
    const mainDataChange = changes['formArray'] ;
    if (mainDataChange) {
      this.formArray = changes['formArray'].currentValue;
      this.doneLoading = this.checkArr();
  }
}

Fetching firebase data on page load, data showing in console but not in html

2 Answers2