Как я могу заполнить массив выбранными значениями из выпадающего списка в Angular?

Question

Я пытаюсь заполнить массив всеми выбранными значениями из выпадающего списка.Цель состоит в том, чтобы создать поле ввода для каждого выбранного значения, например:

Изображение

Я думал о вызове метода каждый раз, когда выбираю значение, но яя не совсем уверен, что делать дальше ... Вот что у меня есть:

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

Вы не указали, когда хотите получить доступ к выбранным объектам.

Это просто, если вы хотите получить доступ к нему при отправке формы, как при нажатии кнопки.Затем вы можете использовать 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 2

Я решил свою проблему ... Я внес следующие изменения на основе ответа 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);
    }
  }
}

Answer 3

Вам не нужно делать это вручную.Просто свяжите свойство value 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>

И вВ вашем компоненте вы можете получить доступ к выбранным опциям через this.products.value.

Здесь - это минимальный стековый блик с рабочим решением.Выбранные значения отображаются непосредственно рядом с mat-select.