Having trouble with displaying subitems of an array using two different arrays. The issue arises when the condition fails, resulting in empty whitespace being printed and occupying unnecessary space under each card header. I've tried using ng-template but still facing the same problem.
Here's the code snippet:
HTML
<div *ngIf = "containsData">
<div class="card-body">
<div style = "width: 70%; margin: auto;" *ngFor = "let data of cardCheckArray; let i = index">
<div class="card-header">
<p>{{data}}</p>
</div>
<div class="card-body" *ngFor = "let data2 of fetchedData">
<div *ngIf = "data2.PROCESS_NAME == data; else printNothing">
<p>{{data2.DOCUMENT_NAME}}</p>
<p>{{data2.DATE_SUBMITTED | date: 'medium'}}</p>
<p>{{data2.PROCESS_NAME}}</p>
</div>
<ng-template #printNothing>
<p>empty</p>
</ng-template>
</div>
</div>
<hr>
</div>
</div>
typescript
var swap = this.fetchedData[0].PROCESS_NAME;
for (var x in this.fetchedData)
{
if(swap == this.fetchedData[x].PROCESS_NAME)
{
continue;
}
else
{
this.cardCheckArray.push(swap);
swap = this.fetchedData[x].PROCESS_NAME;
}
}
this.cardCheckArray.push(swap);
Looking for a solution to avoid printing empty whitespace when the *ngIf condition fails. Any help would be much appreciated. Thank you!