ブートストラップ4モダル内で@Inputを使用して入力を入力する

Question

行をクリックすると@Outputを使用してその行のデータを送信するテーブルがあるメインページがあります（データが正しく送信されていることが既に確認済みです）。プロジェクトの別の場所でそれを使用する）。次に、「データポイント情報」と言うところの左のボタンをクリックするとポップアップするBootstrap 4モーダルが表示されます。私がする必要があるのは、クリックされた行からデータを取り出し、モーダル内部のフォームにそのデータを入力することです。

メインページ：

モーダル：モーダルため

<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モーダルためが

HTMLそれのセレクタを使用してモーダルにする（toSendが、私は、メインページの活字体から送信していた行）からのデータであるタイプDataTableである：私の活字体でreceivedRowが定義されていない理由を私は@Outputと@Inputを使用していますので

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

、私はわかりません。

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 
    } 
}