Angular 2 - Dynamic Variables in ngModel

问题:

How to use dynamic variables in ngModel?

I am trying to use the code below but the following error appears:

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

Erro

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

回答1:

Define array in component and keep pushing in it.

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

Then, update your template like

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

{{ qtd | json}}

In this all your dynamic models will be in qtd array

Plunker

Hope that helps!

回答2:

Let's say you have the following component

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

Then your template might look like:

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

Plunker Example

回答3:

We would mostly need dynamic ngModel in the case of dynamic text box creation.

In your ts file

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

your HTML file (Template)

 <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:

Something like this works fine in my case:

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

In html i used index instead of value (num):

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

回答5:

You can also do it this way if you want, in case you want an id matching the index.

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