I have a * ngFor that repeats cards according to the number of variations:
<ng-container *ngFor="let item of variacoes.controls; let i = index;">
<div class="animated fadeIn col-md-3 paddingbotcard" [formGroup]="item">
<div class="card animated fadeIn">
...
Within that * ngFor I have another * ngFor that repeats the attributes of this card:
<div *ngFor="let atributos of item.value.listaatributos;let indexatributo = index" class="col-6 col-md-4 alinhacentral animated zoomIn">
That is, I have the variable ngFor i which is the index of the cards. If I have 2 cards, i = 1.
I also have the ngFor index attribute variable that has the value of the number of attributes of all the cards. If you have 5 attributes, indexatribute = 4.
I'm having difficulty with how I can do to give a hidden div in my attributes when I have no attribute on that card.
To use as an auxiliary in the condition, I have the array listAttributes , which is composed as follows:
[ { "indexvariacaoatributo": 0, "id": 5, "tipovariacao": "Cor", "valorvariacao": "Azul" }, { "indexvariacaoatributo": 0, "id": 8, "tipovariacao": "Tamanho", "valorvariacao": "M" }, { "indexvariacaoatributo": 1, "id": 5, "tipovariacao": "Cor", "valorvariacao": "Azul" }, { "indexvariacaoatributo": 1, "id": 9, "tipovariacao": "Tamanho", "valorvariacao": "G" } ]
Where the indexvariance attribute tells which card that attribute is. In this case, the attribute "blue and M" belong to card 0 and the other card belongs to Blue, G.
Can anyone think of a condition for the second div to be shown only if it has attributes for that div?