如何从Angular 4中的每个选择选项实例中检测所选元素？

Question

我有多个模板小部件，它们是使用* ngFor，[（ngModel）]动态创建的。 现在，每个模板都包含一个选择选项列表。

问题是：

如果我从模板＃1中选择选项＃1，其他模板也会获得选项＃1。 如果我在其他模板中更改选项＃2，例如模板＃4，则所有模板都会获得相同的选项＃2。

我试图像这样删除这个问题：

i）

results

还有，

ii）`*ngFor="let template of templateList, let i = index"> <!-- truncated--> <select [(ngModel)] = "selectedOption[i]" (change)="myFunc()"> <option *ngFor="let element of elements">{{element}}</option> </select>`

但是在这两种情况下我都无法确定＆＃34; selectedOption＆＃34;对于myFunc函数中的单个模板。

[(ngModel)] = "selectedOption[$index]"

dashboardConfig.component.html ###

此部分选择否。小工具

`myFunc(){console.log(this.selectedOption);}`

此部分用于创建小部件

 <div class="edit-dashboard">      
     <select [(ngModel)] = "widgetCounter" (change)="widgetCountFunc()">
        <option *ngFor="let i of ArrayOfNumbersForWidget">{{i}}</option>
     <select>
 </div>

dashboardConfig.component.ts ###

  <div class="widget-area" *ngFor="let i of widgetObjList ">    

    <select [(ngModel)]="selectedOption (change)="selectedOptForThisWidget()">
         <option *ngFor="let opt of ListOfOpts" [value]="opt">{{opt}}</option>
     </select>
  </div> 

  

ArrayMaker（）这部分创建一个选定数字的数组，而不是详细说明

因此问题出现在 widgetCountFunc(){ this.ListOfOpts = ArrayMaker(this.widgetCounter); } 。

1）如何为每个小部件选择单独的选项？    例如对于小部件＃1 - ＆gt;选项＃2;小部件＃2 - ＆gt;选项＃5等。

2）如何通过显示每个小部件的预选选项     [(ngModel)] = "selectedOption"假设我们有一个小部件的json文件和相应的选项？