Question

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

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

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数组？

谢谢！

Answer 1

您不需要手动执行此操作。只需将value的{{1}}属性绑定到当前的mat-option字符串，您的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>访问选定的选项。

Here 是一个最小的解决方案。所选值直接显示在this.products.value旁边。

Answer 2

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

如果您想在提交表单时访问它，就像单击按钮一样简单。然后，您可以使用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);
}

Answer 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);
    }
  }
}

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

3 个答案: