Angular 在自定义下拉列表中仅选择一个值下拉列表

我使用我自己的自定义下拉列表，我只需要选择一个值，它应该是当我单击

Dropdown1

时，

div

将显示

Dropdown1

，当我单击

Dropdown2

时，它将替换

div

中的Dropdown1。这是我创建的链接

ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  savedCards = [];
  show = false;
  hasSelected: boolean;

    savedCreditCards = [
    { id: '001', viewValue: 'Dropdown1' },
    { id: '002', viewValue: 'Dropdown2' },
    { id: '003', viewValue: 'Dropdown3' },
    { id: '004', viewValue: 'Dropdown4' },
  ];

  ngOnInit() {
  }

  selectSavedCard() {
    this.show = !this.show;
  }

  selectDropdownCard(card) {
    this.savedCards.find((item) => item.id === card.id) ?
      this.savedCards = this.savedCards.filter((item) => item.id === card.id) :
      this.savedCards.push(card);
    this.show = false;
    this.hasSelected = true;
  }

}

html

  <div class="div1" (click)="selectSavedCard()">
    <div *ngIf='!hasSelected'>
      <div>
        <p>dropdown</p>
      </div>
    </div>
    <div *ngFor="let card of savedCards">
      <div>
        <p>{{card.viewValue}}</p>
      </div>
    </div>
  </div>
  <div class="div2" *ngIf="show">
    <div *ngFor="let card of savedCreditCards" (click)="selectDropdownCard(card)">
      <div>
        <p>{{card.viewValue}}</p>
      </div>
    </div>
  </div>

下拉列表

{{card.viewValue}}

{{card.viewValue}}

---

我知道可以将存储卡设置为空，但我认为这不是最佳做法，需要意见和建议，

仅显示选定的单个卡，而不是将其推入阵列。只需使用单个项创建一个新数组。这意味着在

选择下拉卡的方法中

替换此
此.savedCards.push（卡）与
this.savedCards=[card]
您正在使用数组存储应该只有一个值的内容。
您应该将savedCard定义为一个简单的对象，删除用于在html中浏览savedCard的ng，并只保存单击的卡片

我更新了您的示例
如果您只需要一个选定的选项，那么为什么savedCards是一个数组？因为我需要在htmlbut上迭代*ngFor以显示下拉列表中您使用的其他数组中的所有选项如果我将savedCards设置为一个字符串，我如何过滤card.id，并且我尝试将其设置为一个字符串，它不起作用只是将它作为一个对象来存储唯一保存的一个Card我看到了，我没有意识到我推了一个数组，这应该是可以接受的答案