Question

我有一个主页，其中有一个表格，当点击一行时，它会使用@Output发送该行的数据（我已经确认数据正在正确发送通过在项目的另一个地方使用它）。然后，当我点击左下方的按钮时，我会弹出一个Bootstrap 4模式，它会显示＆＃34;数据点信息＆＃34;。我需要做的是从被单击的行中获取数据，并使用它填充模态内的表单。

主页：

模态：

模式的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，这是我从主页面发送的行中的数据＆＃39; s打字稿）：

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

由于我使用@Output和@Input，我不确定为什么我的Typescript中的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
     }
}

使用Bootstrap 4模式中的@Input填充输入

1 个答案: