Динамически создавать объект сопоставления Javascript при изменении опции окна выбора

Question

У меня есть два поля выбора: сечение и диаграмма.

<select #section>
<option value="section 1">section 1</option>
<option value="section 2">section 2</option>
</select>
<select #chart>
<option value="graph">graph</option>
<option value="bar">bar</option>
<option value="donuts">donuts</option>
</select>

Есть одна кнопка:

<button (click)="click()">Add</button>

Я хочу создать динамический объект сценария Java.на основе выбора двух упомянутых полей выбора.

Выходные данные должны выглядеть следующим образом:

0: {section: section 1, chart: Array(1)}
1: {section: section 2, chart: Array(3)}

Array(1) = ['donuts']

, поскольку нажата кнопка «Добавить», в то время как опция «пончики» выбрана во втором окне выбора, когда выбран раздел 1в первом поле выбора

Array(3) = ['donuts','bar','graph']

, так как кнопка «Добавить» нажимается после выбора каждой опции из второго поля выбора, а часть 2 выбирается из первого поля выбора

Может кто-нибудь помочь, пожалуйста?

<div class="toolbar">
        <select #section>
            <option value="section 1">section 1</option>
            <option value="section 2">section 2</option>
        </select>

        <select #chart>
                <option value="graph">graph</option>
                <option value="bar">bar</option>
                <option value="donuts">donuts</option>
            </select>
        <button (click)="click()">
            Add widget 
        </button>   `  



section : section 1
chart: Array(1)

Answer 1

Вы можете использовать [(ngModel)] для привязки данных

HTML, как показано ниже:

<div class="toolbar">
    <select  [(ngModel)]="data.section">
        <option value="section 1">section 1</option>
        <option value="section 2">section 2</option>
    </select>

    <select  [(ngModel)]="data.chart">
            <option value="graph">graph</option>
            <option value="bar">bar</option>
            <option value="donuts">donuts</option>
        </select>
    <button (click)="click()">
        Add widget 
    </button>
    </div>

.ts файл как:

export class AppComponent {
  title = 'stackoverflow';
  data: any;
  constructor() {
    this.data={
        "section":"",
        "chart":""
    }
  }

  click():void {
    console.log(this.data);
  }
}

Теперь, когда вы выбираете «секцию 2» из первого поля выбора и «бар» во втором, переменные данные будут «{section: "section 2", chart: "bar"}».