Problem with *ngIf: Cannot read Property 'indexvariacaoatributo' of Undefined

Question

I have a reactive form and I need to show this card only when in my array listAtributos[i].indexvariacaoatributo is different from null. It turns out that initially there is no indexvariacaoatributo, then it returns:

Cannot read Property 'indexvariacaoatributo' of Undefined

What I tried to:

<ng-container *ngFor="let item of variacoes.controls; let i = index;">
<div *ngIf="listAtributos[i].indexvariacaoatributo !== undefined && listAtributos[i].indexvariacaoatributo !== null" class="animacaogeral animated zoomIn">

Is there any alternative for me to only show this card when my property of my array (indexvariacaoatributo) is different from null before it exists?

Answer 1

I believe the problem is not in indexvariacaoatributo, is probably in the listAtributos[i], who for some reason is undefined in some element.

Try this, maybe it will solve:

<ng-container *ngFor="let item of variacoes.controls; let i = index;">
<div *ngIf="listAtributos[i] && listAtributos[i].indexvariacaoatributo" class="animacaogeral animated zoomIn">

In short, I first check whether listAtributos[i] exists and then I check if listAtributos[i].indexvariacaoatributo exists if the item is null, '', 0 or undefined he will return false in a if, operador ternário and etc.