自定义下拉菜单仅显示选定的值Angular

Question

[我使用div使用自定义下拉列表，当我从API获得对象响应cards时，我需要使用自定义下拉列表进行数据迭代，问题出在选择之后，下一次单击的下拉列表仅显示选定的值（应该是数组对象） ），这是我尝试过的：

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 demo，对于第一个单击的下拉列表，在选择卡片后，它运作良好（显示所有阵列），单击drodpdown，（它仅显示选择的卡片，应该显示所有阵列），希望可以使您大家理解并给我建议解决这个问题。

Answer 1

您已过滤并修改this.myData.cards以仅包含一项：

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

因此，它仅显示单个项目。
删除this.myData.cards= [card];将显示所有项目