在更改選擇框的選項上動態創建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選擇框中選擇每個選項后單擊添加，而從第1選擇框中選擇了第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);
  }
}

現在，當您從第一個選擇框中選擇“ section 2”，在第二個選擇中選擇“ bar”時，變量數據將為' {section: "section 2", chart: "bar"} '。