несколько 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 и дата окончания 11.02.2018


ng-bootstrap angular2-template ngb-datepicker
person Tompish    schedule 16.02.2018    source источник
comment
Я также сталкиваюсь с той же проблемой. Вы нашли решение?   -  person FindOutIslamNow    schedule 09.07.2018
comment
Вы используете одну и ту же ссылку на шаблон #de для обоих (всех) элементов datepicker в структурной директиве *ngFor. У вас есть один и тот же элемент/объект DOM, созданный для обоих элементов. У вас не может быть динамически определяемых ссылок на шаблоны, таких как #de{{index}}, но вы должны иметь возможность поместить свой элемент в другую структурную директиву, например ngIf. Таким образом, [ngFor [ngIf [datepicker]]] Таким образом, ngIf создает новую область действия шаблона, и шаблоны, определенные внутри, не должны быть доступны снаружи => избегайте конфликта двух ссылок на шаблоны #de. К сожалению, это не работает, но изучите вариант   -  person Tiha    schedule 14.06.2019
comment
Рассматривали ли вы решение, описанное в stackoverflow.com/questions/45004293/?   -  person Niz    schedule 21.05.2020