使用@Input填充輸入內部引導4模態

Question

我有一個表格的主頁，當點擊一行時，它使用@Output發送出該行的數據（我已經確認數據正在正確發送在項目的另一個地方使用它）。然後，當我點擊下方左側的「數據點信息」按鈕時，彈出一個Bootstrap 4模式。我需要做的是從點擊的行中獲取數據，並使用它在模態中填充表單。

主頁：

模態：

HTML的模式：

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog bodyWidth"> 
<div class="modal-content wide"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h4 class="modal-title">Update Data Point</h4> 
    </div> 
    <div class="modal-body"> 
    <form class="form-inline" [formGroup]="updateForm" (ngSubmit)="submitForm(updateForm.value)"> 
     <div class="row"> 
     <div class="form-group" [ngClass]="{'has-error':!updateForm.controls['dataPoint'].valid && updateForm.controls['dataPoint'].touched}"> 
      <label>Data Point:</label> 
      <input class="form-control special" type="text" [formControl]="updateForm.controls['dataPoint']"> 
     </div> 
     <div class="form-group move" [ngClass]="{'has-error':!updateForm.controls['ICCP'].valid && updateForm.controls['ICCP'].touched}"> 
      <label >ICCP:</label> 
      <input type="text" class="form-control special" [formControl]="updateForm.controls['ICCP']"> 
     </div> 
     <div class="form-group" [ngClass]="{'has-error':!updateForm.controls['startDate'].valid && updateForm.controls['startDate'].touched}"> 
      <label>Start Date:</label> 
      <input [value]="getDate('start')" class="form-control special" type="text" [formControl]="updateForm.controls['startDate']" style="margin-right: 4px;"> 
     </div> 
     <div style="display:inline-block"> 
      <ngb-datepicker id="special" *ngIf="startCheck;" [(ngModel)]="startDate" (ngModelChange)="showDatePick(0)" [ngModelOptions]="{standalone: true}"></ngb-datepicker> 
     </div> 
     <button type="button" class="btn icon-calendar closest" (click)="showDatePick(0)"></button> 
     <div class="form-group" [ngClass]="{'has-error':!updateForm.controls['endDate'].valid && updateForm.controls['endDate'].touched}"> 
      <label >End Date:</label> 
      <input [value]="getDate('end')" class="form-control special" type="text" [formControl]="updateForm.controls['endDate']"> 
     </div> 
     <div style="display:inline-block"> 
      <ngb-datepicker id="special" *ngIf="endCheck;" [(ngModel)]="endDate" (ngModelChange)="showDatePick(1)" [ngModelOptions]="{standalone: true}"></ngb-datepicker> 
     </div> 
     <button type="button" class="btn icon-calendar closer" (click)="showDatePick(1)"></button> 
     </div> 
    </form> 
    </div> 
    <div class="modal-footer"> 
    *All Fields Are Required. End Date must be after Start Date 
    <button type="submit" class="btn" [disabled]="!updateForm.valid" data-dismiss="modal">Update</button> 
    <button type="button" (click)="resetForm()" class="btn" data-dismiss="modal">Cancel</button> 
    </div> 
</div> 
</div> 
</div> 

打字稿的模式：從主頁是地方

@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){ 
    this.updateForm = fb.group({ 
    'dataPoint' : [DPS[0].tDataPoint, Validators.required], 
    'ICCP' : [DPS[0].tICCP, Validators.required], 
    'startDate' : [DPS[0].tStartDate, Validators.required], 
    'endDate' : [DPS[0].tEndDate, Validators.required] 
}, {validator: this.endDateAfterOrEqualValidator}) 
} 

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

submitForm(value: any){ 
    console.log(value); 
} 

public getDate(dateName: string) { 
    let workingDateName = dateName + 'Date'; 
    let timestamp = this[workingDateName] != null ? new Date(this[workingDateName].year, this[workingDateName].month-1, this[workingDateName].day).getTime() : new Date().getTime(); 
    this.updateForm.controls[dateName + 'Date'].setValue(this.datePipe.transform(timestamp, 'MM/dd/yyyy')); 
} 

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

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

HTML模態在那裏使用它的選擇器（toSend是DataTable類型，是從我從主網頁的打字稿發送）該行的數據：

<update-validation [receivedRow]='toSend'></update-validation> 

由於我使用@Output和@Input，我不知道爲什麼receivedRow在我的打字稿是未定義。

Answer 1

原因是當你的模態組件初始化時，沒有任何receivedRow。你應該用*ngIf指令和ngOnChange這樣的方法來控制它;

//xyz is just any field on your parent component 

//in html 
<div *ngIf="xyz"> 
    <update-validation [receivedRow]="xyz"></update-validation> 
</div> 

//in component of modal 
ngOnChanges(){ 
    if(receivedRow){ 
      //do whatever you want 
    } 
}