Question

我有一个看起来像这样的对象

public data = {
    column1Code: 63,
    column1Value: "test",

    colum2Code: 85,
    column2Value: "random"
    ...
}

我创建了一个表单数组，其中包含每个列的控件

<tbody formArrayName="codeSelections">
    <ng-template ngFor let-control [ngForOf]="reportForm.controls.codeSelections.controls" let-i="index">
        <tr>
            <td>{{ "Column" | translate }} {{ i + 1}}</td>
            <td>
                <kendo-dropdownlist [formControlName]="i"
                                    [data]="codeSelectionOptions"
                                    [textField]="'StringValue'"
                                    [valuePrimitive]="true"
                                    [valueField]="'ID'">
                </kendo-dropdownlist>
            </td>
            <td></td>
            <td><input type="checkbox" /></td>
        </tr>
    </ng-template>
</tbody>

我想知道是否可以使用循环中的i var打印出变量。

所以例如对于eacht列我需要打印一个下拉列表，这是我想要实现的，但我无法弄清楚它的正确语法

<kendo-dropdownlist [formControlName]="i"
                    [data]="codeSelectionOptions"
                    [textField]="'StringValue'"
                    [(ngModel)]="{{data. + 'column' + i + 'Code'}}"
                    [valuePrimitive]="true"
                    [valueField]="'ID'">
</kendo-dropdownlist>

我不确定我所问的是否可行，而且我找不到任何相关内容。

提前感谢您的帮助

Answer 1

[]和{{}} 从不在同一属性或属性绑定中一起使用。

[(ngModel)]="{{data. + 'column' + i + 'Code'}}"

应该是

[(ngModel)]="data. + 'column' + i + 'Code'"

`的数据。 +'列'可能不是你想要的。改为使用

[(ngModel)]="data['column'] + i + 'Code'"

表达式不能用于双向绑定，因此您需要将其拆分为值和事件绑定：

[ngModel]="data['column'] + i + 'Code'" (ngModelChange)="updateSelection($event)"

（其中updateSelection作为您需要实现的发明方法名称）但我实际上看不出如何使用计算值。

根据文档http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/forms/

[(ngModel)]="data['column']" [textField]="data['column'] + i + 'Code'"

可能会做你想要的。

Answer 2

我没有使用角度，但明显的错误是您尝试访问对象的方式，请尝试使用

{{data['column'+i+'Code']}}

我还建议您拥有一系列对象，这样您就不必在column2code等旁边使用column1code，而是让自己的生活更加艰难

通过在模板中组合字符串+索引来选择变量

2 个答案: