CODEWITHSUNDEEP
angularfirebasegoogle-cloud-firestoreasync-awaitngonchanges
TSH
TSH

Reputation: 39

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

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>

enter image description here

Upvotes: 1

Views: 181

Answers (2)

TSH
TSH

Reputation: 39

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();
  }
}

Upvotes: 0

Y_Moshe
Y_Moshe

Reputation: 432

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..

Upvotes: 0

Related Questions