Question 119143 in Firebase Question posted in
An extensive official documentation can be found here.

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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


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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search