在更改选择框的选项时动态创建Javascript映射对象

我有两个选择框：剖面和图表。

<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>

因为当在第一个选择框中选择第1节时，在从第二个选择框中选择甜甜圈选项的同时单击添加

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

因为从第二个选择框中选择每个选项后单击添加，而从第一个选择框中选择第二节

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

有人能帮忙吗

<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)

第一节
第二节
图表
酒吧
甜甜圈
添加小部件
`  
第1节
图表：数组（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>

现在，当您从第一个选择框中选择“section 2”并在第二个选择框中选择“bar”时，变量数据将是“

{section:“section 2”，图表：“bar”}

”。

您可以使用[（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>

---

现在，当您从第一个选择框中选择“section 2”并在第二个选择框中选择“bar”时，变量数据将是“

{section:“section 2”，chart:“bar”}

”。

是否要保留从第二个选择框中选择的所有选项的历史记录，直到单击“添加”窗口小部件？图表历史记录应特定于所选的部分。例如，如果第1部分与1个图表一起选择，则第2部分再次被选择，但第1部分与另一个图表选项一起选择，则第1部分图表历史记录应在此处，是否要保留从第二个选择框中选择的所有选项的历史记录，直到单击“添加”窗口小部件？图表历史记录应特定于所选的部分。例如，如果第1部分与1图表一起选择，则第2部分再次被选择，但第1部分与另一个图表选项一起选择，则第1部分图表历史记录应在其中。我要创建一个数组在具有两个键的对象中，第二个键“chart”应该是一个数组，用于保存为该特定部分选择的图表的所有历史记录。如果节已更改，并且在图表下拉列表中选择了一个值，则该值将再次压入数组“chart”中第二个键的数组中。我要创建一个包含两个键的对象数组section和chart，第二个键“chart”应为一个数组，该数组保存为该特定节选择的图表的所有历史记录。如果更改了节，并且在图表下拉列表中选择了一个值，则该值将再次按入数组“chart”中第二个键的数组中。

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

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