CODEWITHSUNDEEP
angulartypescriptfirebasefirebase-realtime-database
Adeel
Adeel

Reputation: 143

ngFor Not display array data, this data retrieve form Firebase

Hey I know this question comes up a lot but the normal fixes do not work.

ts

onChangeFormType(changeFormType) {
this.serverData.getData('questionnaire/' + changeFormType)
  .subscribe(
    (response: Response) => {
      this.formType = response.json();
      let key = Object.keys(this.formType);
      for (let i = 0; i < key.length; i++) {
        this.currentValue.push(this.formType[key[i]])
      }
      console.log('current Value', this.currentValue);
    },
    (error) => console.log('Form Error', error)
  )}

In console.log('current Value', this.currentValue); works good.

But, when I run ngFor loop in DOM it does not work.

enter image description here

html

<div class="col-9" *ngFor="let data of currentValue">
  <div formGroupName="questions">
    <div class="form-Group">{{ data.sno }}</div>
      <br>
      <div class="from-Group">{{ data.question}}</div>
    </div>
  <div formGroupName="options">
    <label>
      <input type="radio" formControlName="op1">{{ data.options}}
    </label></div>

Upvotes: 2

Views: 446

Answers (1)

robbannn
robbannn

Reputation: 5013

The options, question and sno properties are properties of the elements in the items-array of each data-object. Therefore you can nest another *ngFor inside the one you have. Like this:

<div class="col-9" *ngFor="let data of currentValue">
  <div *ngFor="let item of data.items">
    <div formGroupName="questions">
      <div class="form-Group">{{ item.sno }}</div>
        <br>
        <div class="from-Group">{{ item.question }}</div>
      </div>
    <div formGroupName="options">
      <label>
        <input type="radio" formControlName="op1">{{ item.options }}
      </label>
    </div>
  </div>
</div>

Allthough item.options is an object you might want to handle that another way depending on how it is structured.

Upvotes: 1

Related Questions