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

Question

>我在动态创建的小部件中具有相同的选择选项列表。因此，每当我从小部件 #1 中选择一个选项时，也会为其他小部件选择相同的选项。 如何隔离其范围以从小部件中识别每个选项。我已经检查了几个链接，例如：这个或这个。但我需要在 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 ->选项 #2;小部件 #2 ->选项 #5 等。

2(如何通过以下方式显示每个小部件的预选选项"selectedOption"假设我们有小部件和相应选项的 JSON 文件？

Answer 1

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

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

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

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