如何使用 Angular 下拉列表中的选定值填充数组？答案

【问题标题】：How can I populate an array with selected values from dropdown in Angular?如何使用 Angular 下拉列表中的选定值填充数组？
【发布时间】：2019-03-01 23:37:25
【问题描述】：

我正在尝试使用 mat-select 下拉列表中的所有选定值填充数组。目标是为每个选定的值创建一个输入字段，如下所示：

Image

我想过每次选择一个值时都调用一个方法，但我不太确定下一步该做什么...... 这就是我所拥有的：

MyComponent.component.html

<mat-form-field>
  <mat-select placeholder="Products" [formControl]="products" multiple>
    <mat-option *ngFor="let product of productsList">{{ product }}</mat-option>
  </mat-select>
</mat-form-field>

MyComponent.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'm-mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
export class MyComponent implements OnInit {

  products = new FormControl();
  productsList = ['Prod1', 'Prod2', 'Prod3', 'Prod4', 'Prod5', 'Prod6'];
  productsToReturn = [];

  constructor() { }

  ngOnInit() {
  }

  fillProductsToReturn(product){
    if(!this.productsToReturn.includes(product)){
      this.productsToReturn.push(product);
    }
  }
}

如何调用 html 文件中的方法并填充 productsToReturn 数组？

谢谢！

【问题讨论】：

标签： javascript bootstrap-4 angular-material

【解决方案1】：

您没有指定何时要访问选定的对象。

如果您想在提交表单时访问它，这很简单，例如单击按钮。然后你可以使用this.products.value 来获取选中的选项。

如果你在选择的时候想要它，那么你可以绑定到selectionChange()事件

<mat-select placeholder="Products" [formControl]="products" multiple (selectionChange)="onSelectionChange($event) >

然后在ts文件中就可以得到选择的选项

onSelectionChange(e){
    console.log(e.value); //or
    console.log(this.toppings.value);
}

【讨论】：

嗨！我已经用具有预期目标的图像更新了我的问题......但我会尝试你所说的并提供一些反馈！谢谢！
非常感谢，您的回答让我得到了我想要的！在尝试了您的解决方案后，我实现了我想要的......我只需将 (selectionChange) 更改为 (onSelectionChange) 并将其移动到 mat-option 元素。我会发布我的解决方案...

【解决方案2】：

您无需手动执行此操作。只需将mat-option 的value 属性绑定到当前product 字符串，您的FormControl 将包含所选选项的数组。

模板

<mat-form-field>
  <mat-select placeholder="Products" [formControl]="products" multiple>
    <mat-option *ngFor="let product of productsList" [value]="product">{{ product }}</mat-option>
  </mat-select>
</mat-form-field>

在您的组件中，您可以通过this.products.value 访问选定的选项。

Here 是一个带有工作解决方案的最小堆栈闪电战。选定的值直接显示在mat-select旁边。

【讨论】：

感谢您的回复！如果我想在下拉列表中显示选定的值，但如果我想在单独的列表中显示它们怎么办？这就是我想要数组的原因......我会更新我的问题，以免造成混淆。

【解决方案3】：

我解决了我的问题... 我根据j4rey的回答做了以下改动

MyComponent.component.html

<mat-form-field>
  <mat-select placeholder="Products" [formControl]="products" multiple>
    <mat-option *ngFor="let product of productsList" [value]="product" (onSelectionChange)="onSelectionChange(product)">{{ product }}</mat-option>
  </mat-select>
</mat-form-field>

<div class="row" *ngFor="let product of productsToReturn">
  <div class="col-4">
    <mat-form-field>
      <input matInput disabled="disabled" [value]="product">
    </mat-form-field>
  </div>
  <div class="col-2">
    <mat-form-field class="prod-qty">
      <input matInput step="1" value="1" min="1" type="number">
    </mat-form-field>
  </div>
</div>

MyComponent.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'm-mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
export class MyComponent implements OnInit {

  products = new FormControl();
  productsList = ['Prod1', 'Prod2', 'Prod3', 'Prod4', 'Prod5', 'Prod6'];
  productsToReturn = [];

  constructor() { }

  ngOnInit() { }

  onSelectionChange(product: string) {

    if (!this.productsToReturn.includes(product)) {
      this.productsToReturn.push(product);
    } else {
      let index = this.productsToReturn.indexOf(product);
      this.productsToReturn.splice(index, 1);
    }
  }
}

【讨论】：