首页 文章

选择标记中的ngModel - 在ngFor内

提问于
浏览
1

此示例中的ngModel正在终止我的浏览器 . 任何想法如何获得每个表格单元格模型? (我试图使用(更改),它工作 - 但更改了选定的值)

<tr *ngFor="let step of procSteps; let i = index;  let first = first; let last = 
                                      last; let even = even; let odd = odd;">

                <td> <p>{{step.position}}</p> </td>

                <td> <p>{{step.name}}</p> </td>

                <td>
                    <select [(ngModel)]="selectedSystemStep[i]">
                        <option *ngFor="let system of systemModuleList" 
                                [value]="system.id">{{system.name}}</option>
                    </select>
                </td> 
</tr>

1 回答

  • 3

    EDIT:

    根据您的要求,您还可以向现有数组中的对象添加新属性,该属性将下拉列表中的值存储到每个对象,如:

    <tr *ngFor="let step of procSteps; let i = index">
      <td> <p>{{step.position}}</p> </td>
      <td>
        <select [(ngModel)]="step.newProp">
          <option *ngFor="let system of systemModuleList" 
            [value]="system.id">{{system.name}}</option>
          </select>
      </td> 
    </tr>
    

    以上和以下解决方案的演示:http://plnkr.co/edit/24rEpkTYKcXvMUMAyU2B?p=preview


    ORIGINAL ANSWER:

    你存储id的辅助数组怎么样?

    idArr = []
    

    在模板中,我们使用 items 的迭代索引并将 obj.id 存储到相应的索引:

    <div *ngFor="let item of items; let i = index">  
      <select [(ngModel)]="idArr[i]">  
        <option *ngFor="let obj of objects" [value]="obj.id">{{obj.name}}</option>  
     </select>  
    </div>
    

    现在你整齐地将所有id存储在 idArr 中 .

相关问题