Несколько 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

0 ответов

Другие вопросы по тегам