в пользовательском выпадающем меню отображается только выбранное значение Angular

Question

Я использую пользовательское раскрывающееся меню, используя div, когда я получил отклик объекта cards от API, мне нужно перебрать данные, используя настраиваемое раскрывающееся меню, проблема после выбора, при следующем щелчке раскрывающегося списка отображается только выбранное значение (предполагается, что это массив)объект), вот что я пробовал:

ts файл

  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 файл

  <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>

это моя демонстрация stackblitz , для первого нажатого раскрывающегося списка, он работал хорошо (он показывает весь массив) после того, как выбранная карта, нажала drodpdown, (она показывает только выбранную карту, которая должна отображать весь массив), надеюсьребята, вы можете понять и предложить мне решить эту проблему.

Answer 1

Вы отфильтровали и изменили this.myData.cards, чтобы иметь только один элемент:

 selectDropdownCard(card) {
     this.myData.cards= [card];
  }

Поэтому он отображает только один элемент.

Чтобы нажать выбранный элемент, вам не нужночтобы изменить myData, вы можете просто отобразить его без цикла.

<ng-container *ngIf="show1">
    {{selectedCard.cardNumberMasked}} dropdown
</ng-container>

При удалении this.myData.cards= [card]; отобразятся все элементы

Forked Stackbiltz