在自定义下拉列表Angular上仅选择了一个值下拉列表答案

【问题标题】：selected only one value dropdown on custom dropdown Angular在自定义下拉列表Angular上仅选择了一个值下拉列表
【发布时间】：2019-08-24 08:17:26
【问题描述】：

我使用我自己的自定义下拉列表，我只需要使用一个值，它应该是当我点击Dropdown1时，div 将显示Dropdown1，当我点击Dropdown2 时它将替换 Dropdown1 div。这是我创建的stackblitz 链接，

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>

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

【问题讨论】：

如果你只想要一个选定的选项，那么为什么要 saveCards 一个数组呢？
因为我需要在 html 上迭代 *ngFor
但要在下拉列表中显示所有选项，您正在使用另一个数组
如果我将savedCards设置为一个字符串，我该如何过滤card.id，我也曾尝试将它设为一个字符串，它没有工作
只要把它作为一个对象来存储唯一一张保存的卡片

标签： angular typescript dropdown ngfor

【解决方案1】：

只显示被选中的单张卡片，而不是将其推入数组。只需创建一个包含单个项目的新数组。这意味着在您的 selectDropdownCard 方法中

用this.savedCards = [card];替换这个this.savedCards.push(card);

【讨论】：

我明白了，我没有意识到我推送了一个数组，这应该是可以接受的答案

【解决方案2】：

您正在使用数组来存储应该只有一个值的东西。您应该将 savedCard 定义为一个简单的对象，删除 ng-for 用于循环遍历 html 中的 savedCards 并仅保存单击的卡片。

我更新了你的例子here

【讨论】：