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

Posted 2023-03-06

【中文标题】使用 Angular 复制带有 UI 和所选值的下拉列表

【英文标题】：Duplicate the dropdown with UI and the selected value using Angular

【发布时间】：2021-10-31 20:37:04

【问题描述】：

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

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

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案1】：

检查我创建的这个示例， Link

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;
  

【讨论】：

谢谢。我希望这有帮助。但是对于只有一个 的我来说，将根据其中的选项进行动态渲染。在这里，硬编码为两个下拉菜单。

在上面的示例中，尝试创建副本：第一个下拉菜单到第二个下拉菜单，然后在第二个下拉菜单中单击任何一个选项并单击按钮，它将创建另一个 DD。现在更改第二个下拉列表中的值。您将在第三个下拉列表中看到值也在发生变化。