I understand that this question is frequently asked, but the usual solutions don't seem to be effective in this case.
Here is my code snippet:
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)
)
}
}
This is how I've set up 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>
Despite successfully logging 'current Value' in the console, the ngFor loop does not display any data when rendered on the page.
Investigating why the ngFor loop isn't functioning as expected.