ngFor Not display array data, this data retrieve form Firebase

Question

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.

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>

what does console.log('current Value', this.currentValue); return? — Melchia
– Melchia, Commented Apr 22, 2018 at 9:42
current Value [{…}] 0 : formType : "" items : Array(1) 0 : {options: {…}, question: "Test Msg", sno: 1} length : 1 proto : Array(0) proto : Object length : 1 proto : Array(0) console output — Adeel
– Adeel, Commented Apr 22, 2018 at 9:56
The elements in your area to don't seem to have the properties you are looking for in the html — bugs
– bugs, Commented Apr 22, 2018 at 10:39

robbannn · Accepted Answer · 2018-04-23 10:25:15Z

1

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.

answered Apr 23, 2018 at 10:25

robbannn

5,0231 gold badge35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ngFor Not display array data, this data retrieve form Firebase

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related