Несколько ngbDatepicker в цикле ngFor
У меня есть массив данных, которые извлекаются из REST API
, Пользователь должен иметь возможность манипулировать данными. Проблема состоит в том, что когда отображается несколько строк (т.е. длина массива data1 больше 1), это одна и та же дата во всех входных элементах #ds. То же самое касается всех элементов ввода #de. Я проверил данные в массиве с именем data1, и нет дубликатов дат, поэтому проблема заключается в HTML. Поскольку элемент ввода, который не использует ngbDatepicker
работает нормально, проблема связана с ngbDatePicker
как-то, но я не знаю, как это решить.
<form class="form">
<div class="row ml-5 mr-5 mb-2" *ngFor="let dataRow of data1; let in=index;">
<div class="col-12 col-sm mb-2 mb-sm-0">
<input class="form-control form-control-sm" #inpValue value="{{dataRow.fldValue}}" />
</div>
<div class="col-12 col-sm mb-2 mb-sm-0">
<div class="input-group">
<input class="form-control form-control-sm" placeholder="Start Date" name="ds"
[(ngModel)]="data1[in].inputStartDate" ngbDatepicker #ds="ngbDatepicker"/>
<button class="input-group-addon" (click)="ds.toggle()" type="button">
<img src="assets/img/calendar_icon.gif" style="width: 1.2rem; height: 1rem; cursor: pointer;" />
</button>
</div>
</div>
<div class="col-12 col-sm mb-2 mb-sm-0">
<div class="input-group">
<input class="form-control form-control-sm" placeholder="End Date" name="de"
[(ngModel)]="data1[in].inputEndDate" ngbDatepicker #de="ngbDatepicker" />
<button class="input-group-addon" (click)="de.toggle()" type="button">
<img src="assets/img/calendar_icon.gif" style="width: 1.2rem; height: 1rem; cursor: pointer;" />
</button>
</div>
</div>
<div class="col-12 col-sm mb-2 mb-sm-0">
<button class="btn btn-primary btn-block w-100" (click)="saveBtn(dataRow, inpValue.value, dataRow.fldRowID)">Save</button>
</div>
</div>
</form>
Это изображение иллюстрирует проблему: показывает идентичные даты, даже если самый верхний датароу содержит дату начала 1900-01-01 и дату окончания 2018-02-11