如何为 Angular 组件中的 select 元素动态添加选项？

Question

我目前有一个 Angular 组件，其中包含我希望用户能够手动更改的解决方案数组。我已经有一个允许用户动态添加到这个数组的按钮，但我正在尝试实现删除。我想要显示一个包含所有解决方案的 select 框，然后当用户单击其中一个选项并点击“删除解决方案”时，它将从数组中删除该元素。

目前我的组件 html 如下所示：

<div *ngIf="logged" class="solutionsInput">
          <div>
             New Solution:
             <div>
               <textarea id="Solution" [(ngModel)]="newSolution" placeholder="None"></textarea>
             </div>
         </div>
         <button class="add-solutions" (click)="addSolutions(defect)">
             Add Solution
          </button>
<!-- BELOW IS THE PART THAT NEEDS TO BE FIXED -->
          <select id = "solutions"></select>
          <button class="delete-solutions" (click)="deleteSolutions(defect)">
            Delete Solution
         </button>

      </div>

我的组件的打字稿如下所示：

defect.solutions = [] //THIS IS WHAT I WANT TO ALTER
newSolution = "";
addSolutions(defect: Defect): void {
    if(this.newSolution !== "") {
      this.defectService.getSolutionsHelper(defect).subscribe((currSolutions) => {
        //not necessary to see all of this
        })
      });
    }
  }

deleteSolutions(defect: Defect): void {
   //THIS NEEDS TO BE IMLPEMENTED
}

对于我应该做什么有什么想法吗？非常感谢您的帮助！

Answer 1

当我运行遇到这些情况时，我使用多选下拉列表。我的团队将 Kendo UI 用于 Angular 包，但还有其他免费选择，例如：

https://www.npmjs.com/package/ng-multiselect-dropdown

使用这种方法，您可以简单地将调用 this.defectService.getSolutionsHelper 的结果绑定到控件 (defect.solutions)，然后用户可以从易于选择的项目中删除单个成员。由于控件绑定到 defect.solutions，控件将本机 trim 数组。

这可能对你有用。祝你好运！

如何为 Angular 组件中的 select 元素动态添加选项？

How to dynamically add options to a select element in an Angular component?

html

html-select

typescript

angular