Question

我正在使用角度5，我想从下拉列表中选择多个输入并将所选输入存储到数组中。

<select multiple  class="form-control " name="fea" ngModel size="3" >
  <option *ngFor="let feature of features | async" [ngValue]="feature">
       {{ feature.name }}
  </option>
</select>

这里我正确选择了多个输入，但是如何将选择的值存储在数组中？

任何帮助将不胜感激！

Answer 1

您可以将选项标签更改为以下。

<option *ngFor="let feature of features | async" [ngValue]="feature" (click)="AddtoArray(feature.name)">
       {{ feature.name }}
  </option>

在您的组件中，

array:any[]=[];

AddtoArray(feature:any){
    this.array.push(feature);
}

Answer 2

可以使用以下（更改）事件轻松实现此目的：

  <select multiple  class="form-control " name="fea" [(ngModel)]="model" (change)="valueAdded(model)">
      <option *ngFor="let feature of features | async" [ngValue]="feature">
           {{ feature.name }}
      </option>
    </select>

.ts文件中

    var **yourArray**:string[];  // define array

    valueAdded(val){
    **yourArray**.Push(val);
    }

    This will add the selected options from dropDown in array named as **yourArray**

Answer 3

您可以简单地使用ngModel将选择添加到模型/阵列中。

请使用如下所示的内容：-

<select multiple class="form-control " name="fea" ngModel size="3" [(ngModel)]="selectedFeatures">
  <option *ngFor="let feature of features" [ngValue]="feature">
       {{ feature.name }}
  </option>
</select>

有关有效的解决方案，请查看以下堆栈闪电：-

https://stackblitz.com/edit/angular-hyazbe?file=src%2Fapp%2Fapp.component.html

别忘了按shift键进行多项选择。

PS：我没有在代码中使用async管道，但它也可以正常使用。

选择多个输入并以角度5存储到数组中

3 个答案: