Angular2填充Bootstrap 4模態表單輸入與以前點擊數據

Question

在我的主頁上使用Angular2我有一個表，將任何行被點擊的數據發送到Bootstrap 4模式，使用主頁上的按鈕彈出。模態包含表單輸入，其中填充了點擊行的數據以進行編輯。我的問題是，如果我編輯一個或兩個日期欄並提交，那些編輯後的值將填充下一行的表單輸入，然後單擊編輯，但如果我編輯了第一次單擊的行的日期，則只有僅。

例如，如果第1行具有原始日期11/23/2016和11/26/2016和行2具有原始日期12/20/2016和12/22/2016和我選擇編輯第1行第並將其更改爲10/22/2016和10/31/2016。一旦我打開模式編輯第2行，它的日期將是10/22/2016和10/31/2016。但如果我沒有編輯第1行的日期，那麼第2行的日期會正確顯示爲12/20/2016和12/22/2016。此外，前兩個表單輸入不具有此行爲。

我試過在每種方法中使用變化檢測，但沒有一種適用於此問題。還嘗試將receivedRow的日期設置爲null，但這也不起作用。

主頁（在第3行中左側的按鈕就是打開模態）：

模態：

打字稿：

@Component({ 
    selector: 'update-validation', 
    styleUrls: ['../app.component.css'], 
    templateUrl: 'update.component.html', 
    providers: [DatePipe] 
}) 

export class UpdateComponent { 
    @Input() receivedRow:DataTable; 
    public dt: NgbDateStruct; 
    public dt2: NgbDateStruct; 
    public startCheck: boolean = false; 
    public endCheck: boolean = false; 
    updateForm : FormGroup; 

    constructor(fb: FormBuilder, private datePipe: DatePipe, private cdRef:ChangeDetectorRef){ 
    this.updateForm = fb.group({ 
    'dataPoint' : [null, Validators.required], 
    'ICCP' : [null, Validators.required], 
    'startDate' : [null, Validators.required], 
    'endDate' : [null, Validators.required] 
    }, {validator: this.endDateAfterOrEqualValidator}) 
    } 

    ngOnChanges(){ 
    if(this.receivedRow){ 
     this.updateForm.controls['dataPoint'].setValue(this.receivedRow.tDataPoint); 
     this.updateForm.controls['ICCP'].setValue(this.receivedRow.tICCP); 
     this.updateForm.controls['startDate'].setValue(this.receivedRow.tStartDate); 
     this.updateForm.controls['endDate'].setValue(this.receivedRow.tEndDate); 
    } 
    } 

    resetForm(){ 
    location.reload(); 
    //this.updateForm.reset(); 
    } 

    submitForm(value: any, originalRow: any){ 
    var dataPointID = originalRow.receivedRow.tDataPoint; 
    for (let entry in DPS) { 
     if (DPS[entry].tDataPoint === dataPointID) { 
     DPS[entry].tDataPoint = String(this.updateForm.controls['dataPoint'].value); 
     DPS[entry].tICCP = String(this.updateForm.controls['ICCP'].value); 
     DPS[entry].tStartDate = String(this.updateForm.controls['startDate'].value); 
     DPS[entry].tEndDate = String(this.updateForm.controls['endDate'].value); 
     } 
    } 
    } 

    getStartDate(){ 
    var month = this.receivedRow.tStartDate.substring(0,2); 
    var day = this.receivedRow.tStartDate.substring(3,5); 
    var year = this.receivedRow.tStartDate.substring(6,10); 
    var dateToUse = new Date(Number(year),Number(month)-1,Number(day)); 
    let timestamp = this['startDate'] != null ? new Date(this['startDate'].year, this['startDate'].month-1, this['startDate'].day).getTime() : dateToUse.getTime(); 
    this.updateForm.controls['startDate'].setValue(this.datePipe.transform(timestamp, 'MM/dd/yyyy')); 
    } 

    getEndDate(){ 
    var month = this.receivedRow.tEndDate.substring(0,2); 
    var day = this.receivedRow.tEndDate.substring(3,5); 
    var year = this.receivedRow.tEndDate.substring(6,10); 
    var dateToUse = new Date(Number(year),Number(month)-1,Number(day)); 
    let timestamp = this['endDate'] != null ? new Date(this['endDate'].year, this['endDate'].month-1, this['endDate'].day).getTime() : dateToUse.getTime(); 
    this.updateForm.controls['endDate'].setValue(this.datePipe.transform(timestamp, 'MM/dd/yyyy')); 
    } 

    public showDatePick(selector):void { 
    if(selector === 0) { 
     this.startCheck = !this.startCheck 
    } else { 
     this.endCheck = !this.endCheck; 
    } 
    this.cdRef.detectChanges(); 
    } 

    endDateAfterOrEqualValidator(formGroup): any { 
    var startDateTimestamp, endDateTimestamp; 
    for(var controlName in formGroup.controls) { 
     if (controlName.indexOf("startDate") !== -1) { 
     tartDateTimestamp = Date.parse(formGroup.controls[controlName].value); 
     } 
     if (controlName.indexOf("endDate") !== -1) { 
     endDateTimestamp = Date.parse(formGroup.controls[controlName].value); 
     } 
    } 
    return (endDateTimestamp < startDateTimestamp) ? { endDateLessThanStartDate: true } : null; 
    } 
} 

Answer 1

修改submitForm功能設置ngModel的startDate和endDate至null以便當getStartDate和getEndDate被調用，timestamp在getStartDate和getEndDate函數被設置爲基於點擊的行的日期而不是之前綁定的日期startDate和endDate。

submitForm(value: any, originalRow: any){ 
    var dataPointID = originalRow.receivedRow.tDataPoint; 
    for (let entry in DPS) { 
    if (DPS[entry].tDataPoint === dataPointID) { 
     DPS[entry].tDataPoint = String(this.updateForm.controls['dataPoint'].value); 
     DPS[entry].tICCP = String(this.updateForm.controls['ICCP'].value); 
     DPS[entry].tStartDate = String(this.updateForm.controls['startDate'].value); 
     DPS[entry].tEndDate = String(this.updateForm.controls['endDate'].value); 
     this['startDate'] = null; 
     this['endDate'] = null; 
    } 
    } 
}