时间戳

首页 > 解决方案 > 如何动态地将选项添加到 Angular 组件中的选择元素？

html - 如何动态地将选项添加到 Angular 组件中的选择元素？

问题描述

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

目前我的组件的 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
}

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

标签： htmlangulartypescripthtml-select

解决方案

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

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

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

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

推荐阅读