Angular 2 - Динамические переменные в ngModel

Как использовать динамические переменные в ngModel?

Я пытаюсь использовать код ниже, но появляется следующая ошибка:

<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

Определите массив в компоненте и продолжайте нажимать на него.

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

Надеюсь, что это поможет!

Ответ 2

Допустим, у вас есть следующий компонент

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>

Пример плунжера

Ответ 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

Вы также можете сделать это таким образом, если хотите, если вам нужен идентификатор, соответствующий индексу.

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