Using a custom dropdown created with div, I encountered an issue when receiving an object response cards from the API. The problem arises when trying to iterate through the data using the custom dropdown - after selecting an item, the next clicked dropdown only displays the selected value (instead of the array object). Here is what I have attempted:
TS file
selectSavedCard() {
this.show = !this.show;
}
selectDropdownCard(card) {
this.myData.cards.find((item) => item.cardId === card.id) ?
this.myData.cards = this.myData.cards.filter((item) => item.cardId === card.id) :
this.myData.cards= [card];
this.show = false;
this.hasSelected = true;
this.selectedCard = card;
this.show1 = true;
}
HTML file
<div class="div1" (click)="selectSavedCard()" [(ngModel)]="selectedCard" ngDefaultControl>
<div *ngIf='!hasSelected'>
<div>
<p>dropdown</p>
</div>
</div>
<!-- To bind selected card -->
<ng-container *ngIf="show1">
<div *ngFor="let card of myData.cards">
<div>
<p>{{card.cardNumberMasked}} dropdown</p>
</div>
</div>
</ng-container>
</div>
<div class="div2" *ngIf="show">
<div *ngFor="let card of myData.cards" (click)="selectDropdownCard(card)">
<div>
<p>{{card.cardNumberMasked}}</p>
</div>
</div>
</div>
Here is my StackBlitz demo. Initially, the first clicked dropdown works as expected (displaying all items in the array). However, after selecting an item and clicking on the dropdown again, it only shows the selected card instead of displaying the entire array. Any suggestions on how to solve this are greatly appreciated.