2

我有多个使用 *ngFor, [(ngModel)] 动态创建的模板小部件。现在，这些模板中的每一个都包含一个选择选项列表。

问题是：

如果我从 Template#1 中选择 option#1，其他模板也会得到 option#1。如果我在其他模板中更改选项#2，比如模板#4，所有模板都会获得相同的选项#2。

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

一世）

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

并且，

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

但在这两种情况下，我都无法识别 myFunc 函数中单个模板的“selectedOption”。

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

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

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

4

0 回答 0