Angular 2:以编程方式在表格的所有行中的组合框中选择选项

拉吉

我正在使用带有TypeScript的Angular 2构建应用程序。我有一个下表,该表的其中一列包含select控件。选择控件内容绑定到另一个字符串数组-

    <table ngControl="lstClasses" name="lstClasses">
        <tr *ngFor="let class of model.Classes">
            <td>{{class.Name}}</td>
            <td>
                <select name="cmbSection" [(ngModel)]="class.Section">
                    <option *ngFor="let section of sections"
                        [ngValue]="section">
                        {{section}}
                    </option>
                </select>
            </td>
        </tr>
    </table>

其中Class是类型为{Name:string,Section:string}的对象,sections是string [] = [“ White”,“ Blue”,“ Purple”,“ Green”,“ Red”]。

当我在任何行的任何组合框中更改选定的选项时,它会正确反映在模型中。当我保存并刷新数据时,所有行中的所有选择控件都将显示与表的最后一行一起保存的所选选项。

例如,如果我在表的最后一行中选择“紫色”并将其保存,则在数据刷新时,即使模型包含正确的选项,所有行也会将“紫色”显示为选定选项。

您能帮我解决这个问题吗?

马杜·兰扬(Madhu ranjan)

我认为您正在寻找类似下面的内容,

 <option *ngFor="let section of sections"
                    [value]="section"
                    [selected]="section == class.Section"
                    >
                    {{section}}
 </option>

这是Plunker !!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

从Angular 2中选择所有选项

来自分类Dev

Angular ngbootstrap 在页面加载时以编程方式选择选项卡

来自分类Dev

Angular 2 根据传入的参数从选择列表中选择选项

来自分类Dev

Angular 2 选择选项状态

来自分类Dev

Angular 2,选择选项问题

来自分类Dev

无法绑定Angular中的选择选项

来自分类Dev

无法绑定Angular中的选择选项

来自分类Dev

Angular 5 ngFor 在表单标签中选择选项 ngModel

来自分类Dev

在Angular 2中以编程方式插入表格单元格

来自分类Dev

Angular6-反应形式-使用对象和[selected]绑定时无法以编程方式设置选择选项

来自分类Dev

在Angular的反应式表单上使用对象时,为什么不能以编程方式设置选择选项

来自分类Dev

设置选项在Angular2中选择,并带有异步数据加载

来自分类Dev

angular2从辅助选择元素中删除或禁用选择选项

来自分类Dev

angular2从辅助选择元素中删除或禁用选择选项

来自分类Dev

Angular 4 - 如何获取从组合框中选择的值?

来自分类Dev

Angular 2 ngModelChange选择选项,获取特定属性

来自分类Dev

来自选择选项的 Angular2 POST 数据

来自分类Dev

angular js下拉列表中的Python硒选择选项

来自分类Dev

防止初始选择选项在Angular中为空白

来自分类Dev

显示从组合框中选择的搜索选项的所有结果

来自分类Dev

选择/取消选择Angular 2中的所有功能

来自分类Dev

angular-gettext:内插选择选项

来自分类Dev

从地图中选择表格行。Angular / Google Maps集成

来自分类Dev

带选项的组合框只能以编程方式选择,而不能由用户在 VBA Access 中选择

来自分类Dev

在angular2中,带有ng-repeat的对象数组选择选项不起作用。它赋予[Object object]而不是真实的对象

来自分类Dev

在angular2中选择的问题

来自分类Dev

在AngularJS指令中以编程方式选择选择框的空白选项

来自分类Dev

如何设置要在Angular中选择的所有ng-repeat行

来自分类Dev

每次在Angular 2中选择新选项时如何触发函数?

Related 相关文章

  1. 1

    从Angular 2中选择所有选项

  2. 2

    Angular ngbootstrap 在页面加载时以编程方式选择选项卡

  3. 3

    Angular 2 根据传入的参数从选择列表中选择选项

  4. 4

    Angular 2 选择选项状态

  5. 5

    Angular 2,选择选项问题

  6. 6

    无法绑定Angular中的选择选项

  7. 7

    无法绑定Angular中的选择选项

  8. 8

    Angular 5 ngFor 在表单标签中选择选项 ngModel

  9. 9

    在Angular 2中以编程方式插入表格单元格

  10. 10

    Angular6-反应形式-使用对象和[selected]绑定时无法以编程方式设置选择选项

  11. 11

    在Angular的反应式表单上使用对象时,为什么不能以编程方式设置选择选项

  12. 12

    设置选项在Angular2中选择,并带有异步数据加载

  13. 13

    angular2从辅助选择元素中删除或禁用选择选项

  14. 14

    angular2从辅助选择元素中删除或禁用选择选项

  15. 15

    Angular 4 - 如何获取从组合框中选择的值?

  16. 16

    Angular 2 ngModelChange选择选项,获取特定属性

  17. 17

    来自选择选项的 Angular2 POST 数据

  18. 18

    angular js下拉列表中的Python硒选择选项

  19. 19

    防止初始选择选项在Angular中为空白

  20. 20

    显示从组合框中选择的搜索选项的所有结果

  21. 21

    选择/取消选择Angular 2中的所有功能

  22. 22

    angular-gettext:内插选择选项

  23. 23

    从地图中选择表格行。Angular / Google Maps集成

  24. 24

    带选项的组合框只能以编程方式选择,而不能由用户在 VBA Access 中选择

  25. 25

    在angular2中,带有ng-repeat的对象数组选择选项不起作用。它赋予[Object object]而不是真实的对象

  26. 26

    在angular2中选择的问题

  27. 27

    在AngularJS指令中以编程方式选择选择框的空白选项

  28. 28

    如何设置要在Angular中选择的所有ng-repeat行

  29. 29

    每次在Angular 2中选择新选项时如何触发函数?

热门标签

归档