同一指令的多个实例，如何在Angular 4中隔离范围？

Question

我在动态创建的小部件中有相同的选择选项列表。因此，每当我从小部件＃1中选择一个选项时，也会为其他小部件选择相同的选项。 如何隔离其范围以从小部件中识别每个选项。我检查过几个链接：this one或this one。但是我需要在Angular 4中做到这一点。任何线索？

dashboardConfig.component.html ###

此部分选择否。小工具

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

此部分用于创建小部件

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

dashboardConfig.component.ts ###

 widgetCountFunc(){
     this.ListOfOpts = ArrayMaker(this.widgetCounter);
           }

  

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

因此问题出现在[(ngModel)] = "selectedOption"。

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

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

Answer 1

为什么不创建angular2 / 4组件而不是angular1自定义指令？

  

溶液   为单个选择创建新组件，并在* ngFor迭代中使用组件选择器，并从选择器中传递组件内的适当值。

     

优点   它将创建您需要的单个实例。

     

缺点   由于它是个别实例，因此您需要单独处理组件对象。