我应该如何从 Angular-2 的下拉列表中使用多选选项绑定数组

Posted 2023-03-13

【中文标题】我应该如何从 Angular-2 的下拉列表中使用多选选项绑定数组

【英文标题】：How should i bind array with multi select options from dropdown in Angular-2

【发布时间】：2019-07-09 13:52:54

【问题描述】：

我正在尝试将数组对象与多选下拉列表绑定，以便我可以将选定的值传递给模型以与其他模型详细信息一起保存。

这里我使用更改事件来接收选择的选项值，但该功能不起作用这里是我的代码：

HTML 代码：

label class="col-md-3 form-control-label text-right">Customer Name</label>
           <div class="col-md-7">
             <select  multiple="multiple" class="js-example-basic-multiple form-control selectsizing" (change)="oncustomerSelect($event.target.value)" name="customer_name" [(ngModel)]="customer_name.customer" #customer_name="ngModel" [ngClass]=" 'is-invalid': f.submitted && customer_name.invalid "  required>
              <option></option>
              <option [value]="customernames.Business_name" *ngFor="let customernames of model_customername">customernames.Business_name</option>
     </select>

            </div>

在为下拉列表选择任何值时，应调用oncustomerSelect() 中描述的函数component.ts，但无法完成此函数调用。

这是我的 Component.ts：

 customer_name:any=
    customer:[]
;    
model:any=
product_type:"in stock",    
item_code:"ASD34", 
customer_name:[]=[]
 

oncustomerSelect(value)
console.log("customer select::"+JSON.stringify(value));
var i=0;
this.model.customer_name[i]=value; 
i++; 
console.log("model customer::"+JSON.stringify(this.model.customer_name));  

请帮助我，如何在多选中调用该函数以及如何将数组与选定的值绑定？

谢谢！

【问题讨论】：

在 stackblitz 上创建小演示

【参考方案1】：

检查参考！在给定的链接中，您可以看到您将获得下拉选择的值，您可以添加多选属性并完成此操作

angular5-select-option-dropdown

【讨论】：

先生，这个答案对于从下拉列表中选择单个值是正确的，但我需要从下拉列表中选择多个值，然后将它们绑定到一个数组中。请帮助我@AmitGolhar

@naincyjain 您可以为您的选择选项使用多个属性，它会起作用！

@AmitGolhar 谢谢先生！这个正在工作，我的代码中存在 Bootstrap 类的问题。