我有一个从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