Angular 2 - ngModel 中的动态变量答案

【问题标题】：Angular 2 - Dynamic Variables in ngModelAngular 2 - ngModel 中的动态变量
【发布时间】：2017-05-03 03:06:01
【问题描述】：

如何在ngModel中使用动态变量？

我正在尝试使用下面的代码，但出现以下错误：

<div *ngFor="let num of ['1','2','3']; let i=index">
    <input id="qtd{{num}}" [(ngModel)]="qtd{{num}}" type="text"/>
</div>

错误

Unhandled Promise rejection: Template parse errors: Parser Error: Got interpolation ({{}})

【问题讨论】：

使用数组，使用qtd[num]。
你能举个例子吗？

标签： angular

【解决方案1】：

假设您有以下组件

export class AppComponent {
  qtd1 = 'qtd1';
  qtd2 = 'qtd2';
  qtd3 = 'qtd3';
}

那么您的模板可能如下所示：

<div *ngFor="let num of ['1','2','3']; let i=index">
  <input id="qtd{{num}}" [(ngModel)]="this['qtd' + num]" type="text"/>
</div>

Plunker Example

【讨论】：

谢谢 yurzui。它对我很有用。我可以使用带有这个“this['qtd' + num]”动态变量的管道。如果意味着请帮助我
@kamalav 检查这个stackoverflow.com/questions/39642882/…
我在普通变量中使用了管道。但是在这里（在动态变量中）它给出了错误。那就是我问你
模板解析错误：解析器错误：缺少预期] 在 [let abstract of this[res.Id |] 中的第 55 列replaceSpecialChar +'string'];
@kamalav 你能在 stackblitz.com 上复制它吗？

【解决方案2】：

在组件中定义数组并不断推入。

export class AppComponent {
    qtd:any[] = {};
}

然后，像这样更新您的模板

<div *ngFor="let num of ['1','2','3']; let i=index">
    <input id="qtd{{num}}" [(ngModel)]="qtd[num]" type="text"/>
</div>

{{ qtd | json}}

在此您的所有动态模型都将在 qtd 数组中

Plunker

希望有帮助！

【讨论】：

效果很好！谢谢！几个小时以来，我一直在寻找正确的答案！谢谢！ :)
我在使用{} 时遇到了错误。所以我用qtd:any[] = [];
是否有可能获得类型安全？
我在这里找到了我想要的东西 stackoverflow.com/questions/33547583/… 。类似nameof<MyThing>("myProperty") .
我可以添加动态模型值，但我无法更改该动态值。你有什么想法吗？

【解决方案3】：

在创建动态文本框的情况下，我们主要需要动态 ngModel。

在你的 ts 文件中

 export class AppComponent {
 public selectedBranch: any[] = [0];
 public selectedShiftNameTime: any[] = [0];
 public CustomDates: any[] = [0];
}

您的 HTML 文件（模板）

 <table class="table" style="padding: 20px;">
        <tr>
            <td class="col-md-2">Employee Name</td>
            <td class="col-md-2">Branch</td>
            <td class="col-md-2">Shift Type</td>
            <td class="col-md-2">Custom Dates</td>
        </tr>

        <tr *ngFor="let emp of Empdata">
            <td>
                <label>
                    {{emp.name}}
                </label>
            </td>
            <td>
                <select class="form-control rounded-0"  id="selectedBranch{{emp.EmployeeInfoId}}"  >
                    <option value='0'>--Select--</option>
                    <option *ngFor="let branch of Branchdata" [value]=branch.BranchId>
                            {{branch.BranchName}}
                    </option>
                </select>
            </td>
            <td>

                <select class="form-control rounded-0"  id="selectedShiftNameTime{{emp.EmployeeInfoId}}"  >
                        <option value='0'>--Select--</option>
                        <option *ngFor="let shifType of ShiftTypedata" [value]=shifType.ShiftTypeId>
                                {{shifType.ShiftName}}
                        </option>
                </select>
            </td>
            <td>

                <ng-multiselect-dropdown [placeholder]="'Select Custom Dates'" [data]="dropdownList" id="CustomDates{{emp.EmployeeInfoId}}" [(ngModel)]="CustomDates[emp.EmployeeInfoId]"
                    [settings]="dropdownSettings" (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)">
                </ng-multiselect-dropdown>
            </td>
        </tr>
        <tr>
            <td colspan="4" >
                <button type="button" (click)='submit()' >Submit</button>
            </td>
        </tr>
    </table>

【讨论】：

【解决方案4】：

在我的情况下这样的事情很好用：

   export class AppComponent {
    qtd:any[] = {};
   }

在 html 中，我使用索引而不是值 (num)：

<div *ngFor="let num of ['1','2','3']; let i=index">
    <input id="qtd[i]" [(ngModel)]="qtd[i]" type="text"/>
</div>

【讨论】：

【解决方案5】：

如果你想要一个与索引匹配的 id，你也可以这样做。

<div *ngFor="let num of ['1','2','3']; let i=index">
    <input 
     [attr.id]="'qtd'+i"
    type="text"/>
</div>

【讨论】：