Как получить несколько выпадающих значений Dynami c в одном списке в Angular 7

Question

Я создаю динамический c несколько раскрывающихся в angualar 8. Я получаю список списка из бэкэнда, и я бегу по списку списка, чтобы сгенерировать несколько динамических c раскрывающихся. Теперь мне нужно отправить выбранные значения параметров из всех раскрывающихся списков в бэкэнд еще раз в Angular 8. Я не могу отправить все значения.

Я получаю список в этом формате, из которого я делаю цикл для создания динамического c раскрывающегося списка

cat_dropdown = [['A', 'B', 'C '], [' 1 ',' 2 ',' 3 ']]

На основании приведенного выше списка мой код html генерирует два раскрывающихся списка, один с параметрами A, B, C, а другой с 1,2,3.

Мой HTML Код:

<form (ngSubmit)="segmentSelection()" #ff="ngForm">
   <div id="userSelection" ngModelGroup="userData" #userData="ngModelGroup">
   <div *ngFor="let first of cat_dropdown">
            <mat-form-field>
                <mat-label>Choose Segment Key</mat-label>
                <mat-select id="selectme" name="segmentKey">
                  <mat-option *ngFor="let segment of first" [value]="segment">
                    {{segment}}
                  </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
</form>

Мой код component.ts:

import { NgForm } from '@angular/forms';

export class myComponent implements OnInit {
 @ViewChild("ff", { static: true }) segmentData: NgForm;

 plotselection = {
    segmentKey: []

  }

segmentSelection(){

  this.plotselection.segmentKey = this.segmentData.value.userData.segmentKey;

  fetch("http://localhost:5000/data-decomposition", {
     method: "POST",
     headers: {
       "Content-Type": "application/json"
    },body: JSON.stringify({
       segmentKey: this.segmentData.value.userData.segmentKey,

     })
   }).then(res => res.json()).then(myjson => {
             console.log(myjson)
     })
}

Теперь в моем компоненте .ts у меня есть словарное имя «plotselection», где у меня есть ключевое имя «plotKey», которое я определил как пустой список.

Поскольку у меня есть 2 раскрывающихся списка во внешнем интерфейсе, я подумал, что получу два значения из внешнего интерфейса, и я отправлю их как список для бэкэнда. Когда я выбираю опцию из обоих выпадающих меню, например, из 1-го выпадающего меню, я выбираю «B» и из 2-го «3» и отправляю свой выбор, тогда, когда я регистрирую ответ, я могу видеть только значение «3» в моем списке, а не « B 'и' 3 'вместе. Как я могу иметь оба значения в списке.

Спасибо, и ищу ваше предложение ...

Answer 1

Для простоты я использовал Select контроль вместо mat-select управления. В форме я дал конкретное c имя, добавив индекс для контроля во время цикла.

Html

<div *ngFor="let first of cat_dropdown; let num = index">
             <div> 
                <Label>Choose Segment Key</Label>
                <Select   id="selectme{{num}}" [value]="segment" name="segmentKey{{num}}" (change)="ChangeCall($event.target)">
                  <option *ngFor="let segment of first"  >
                    {{segment}}
                  </option>
                </Select>
            </div>
        </div>

Таким образом, имеется два элемента управления с соответствующими выбранными значениями.

Существует также альтернативное решение - использовать событие Изменить в элементе управления Select.