CODEWITHSUNDEEP
angulartypescriptfirebasefirebase-realtime-databaseangular-forms
Adeel
Adeel

Reputation: 143

*ngFor not display

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

This is my code

export class CourseReviewFormComponent implements OnInit { 
 form: FormGroup
 questionnaire: string[] = [];
 currentQuestionsValue: string[] = [];

 constructor(private serverData: ServerService) { }
  ngOnInit() {
    this.onGetForm();   
   }

 onGetForm() {
   this.serverData.getData('questionnaire/Student Course Review')
     .subscribe(
        (response: Response) => {
         this.questionnaire = response.json();
         let key = Object.keys(this.questionnaire);
         for (let i = 0; i < key.length; i++) {
           this.currentQuestionsValue.push(this.questionnaire[key[i]].items)
         }
         console.log('current Questions Value', this.currentQuestionsValue);
         },
          (error) => console.log('Form Error', error)
         )
      }
    }

my template

 <form>
  <div *ngFor="let data of currentQuestionsValue">
    <strong> {{ data.sno }}). </strong>
    <span>{{ data.question}}</span>
    <div>
      <label *ngFor="let op of data.options; let i = index">
        <input type="radio" name="option" [value]="i">
        <span>{{ op }}</span>
      </label>
    </div>
  </div>
</form>

But the ngFor does not display any data:

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

Upvotes: 2

Views: 1038

Answers (2)

Franklin Pious
Franklin Pious

Reputation: 3848

Are you looking for this.?

let data of currentQuestionsValue[0]

Upvotes: 0

Maciej Caputa
Maciej Caputa

Reputation: 1891

You need to get the first item of an array and iterate over its value which is also an array.

In the ServerService I would add intermediate steps to transform an observable like this:

.map(data => data.json())
.map(json => json[0])

Upvotes: 1

Related Questions