0

I have parent component and child components in my project and array of objects called from API in parent component.

  • Parent Component
public Questions = [];
ngOnInit(): void {
    this.loadQuestions();
}

<div *ngIf="Questions ">
   <app-child-card *ngFor="let item of Questions; index as i;" [data]="item" [index]="i" ></app-child-card>
</div>
  • Child Component
@Input() data: any;
@Input() index: any;
ngOnInit(): void {
    console.log(this.data, this.index);
}

Even if my questions array is empty, child component got rendered exact three times in each try and got output undefined undefined in console.

Prajwal Kamble
  • 21
  • 1
  • 4
  • Sounds strange. I can't see anything wrong with the code you have posted, my best guess is that you're array is somehow set with three undefined items. Have you tried console logging the Questions array? – SnorreDan Aug 16 '20 at 04:50
  • Could you post your loadQuestions() method as well? – SnorreDan Aug 16 '20 at 04:52

1 Answers1

4

empty array is accepted as true condition, so you need to change your condition to *ngIf="Questions.length>0"

roya
  • 286
  • 1
  • 8