我有一个组件打开一个模态对话框,让用户输入两个日期 . 然后我想将这两个日期保存到组件后面的数据库模型中,但是我无法在何时何地获取这些结果 .
要清楚:我当前可以在主要组件的模板中看到对话框结果作为两个日期,但我想知道,在...我的主要组件中的某些方法...当对话框关闭且日期为不再为空 - 所以我可以将它们保存到数据库中 .
我的主要组件模板有一个带有onClick事件的按钮:
<a class="btn btn-sm role="button"><mat-icon title="Get Dates" (click)="onClickGetDates(appt)">flag</mat-icon></a> Result from dialog: {{ dateRangeArray }}
主要组件实现onClick事件:
onClickGetDates(appt) {
this.dialogService
.confirmDateRange('Get Dates', 'Enter two dates:',
appt.beginDate, appt.endDate)
.subscribe(res => this.dateRange = res);
.
.
// I would like to now save the dateRange result to my database, but at this point, result is [null,null], so the code below does nothing (except null out the dates):
appt.beginDate = dateRange[0];
appt.endDate = dateRange[1];
this.apptdata.updateAppt(appt);
}
这是在Dialog Service中定义的confirmDateRange,它实际显示了对话框:
public confirmDateRange(title: string, message: string, begin: Date, end: Date): Observable<boolean> {
let dialogRef: MatDialogRef<ConfirmDialogComponent>;
dialogRef = this.dialog.open(ConfirmDialogComponent);
dialogRef.componentInstance.title = title;
dialogRef.componentInstance.message = message;
dialogRef.componentInstance.beginDate = begin;
dialogRef.componentInstance.endDate = end;
return dialogRef.afterClosed();
}
对话框组件:
export class ConfirmDialogComponent implements OnInit {
public title: string;
public message: string;
public beginDate: Date;
public endDate: Date;
constructor(public dialogRef: MatDialogRef<ConfirmDialogComponent>) { }
ngOnInit() {
}
对话框的模板:
<h2>{{ title }}</h2>
<hr>
<p>{{ message }}</p>
<!--Date Picker Begin-->
<mat-form-field>
<input matInput [matDatepicker]="beginDatePicker" placeholder="Beginning" [(ngModel)]="beginDate">
<mat-datepicker-toggle matSuffix [for]="beginDatePicker"></mat-datepicker-toggle>
<mat-datepicker #beginDatePicker></mat-datepicker>
</mat-form-field>
<!--Date Picker End-->
<mat-form-field>
<input matInput [matDatepicker]="endDatePicker" placeholder="Ending" [(ngModel)]="endDate">
<mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
<mat-datepicker #endDatePicker></mat-datepicker>
</mat-form-field>
<!--OK-->
<button type="button" mat-raised-button
(click)="dialogRef.close([beginDate, endDate])">OK</button>
<!--Cancel-->
<button type="button" mat-button
(click)="dialogRef.close()">Cancel</button>
在对话框中单击OK后,我可以在主组件的模板中看到带有两个日期的结果数组,如下所示: Result from dialog: {{ dateRangeArray }}
. 试图在onClickGetDates中访问相同的结果是'too soon'并且结果是一个空数组...那么,where / when是在主要组件中查看结果的适当位置?
我觉得我错误地使用了对话框的AfterClose()事件,并且我应该能够在事件被触发后检索结果,但是我仍然对Angular太过绿色以了解我做错了什么 .
2 回答
试试这个