时间戳

首页 > 解决方案 > 使用 Angular 复制带有 UI 和所选值的下拉列表

html - 使用 Angular 复制带有 UI 和所选值的下拉列表

问题描述

我有一个带有选项的下拉菜单，还有一个按钮。如果我从下拉列表中选择任何一个选项并单击按钮，则表示我希望该下拉列表的副本显示在下方。即）下拉想要将所选选项显示为默认标签。

所以，最后我会看到两个下拉菜单。我如何使用 Angular 解决这个问题？

标签： htmlcssangularjsangularsass

解决方案

检查我创建的这个示例， 链接

HTML 内容 

<select [(ngModel)]="selectedOption"> 
  <option  *ngFor = "let option of options" [value]="option" >{{option}}</option>
</select>
<button (click)="onBtnClick()">Click Me</button>

<div>
<select *ngFor = "let dOption of duplicateOptions" [(ngModel)]="selectedDuplicatedOption">
  <option  *ngFor = "let option of options" [value]="option" >{{option}}</option>
</select>
</div>

Javascript 内容

export class AppComponent  {

  options: any = ['One','Two','Three'];
  selectedOption: string;
  selectedDuplicatedOption: string;
  duplicateOptions: any = [];

  onBtnClick(){
    this.duplicateOptions.push(this.selectedOption);
    this.selectedDuplicatedOption = this.selectedOption;
  }
}

推荐阅读