angular - Mat-DatePicker - [(ngModel)] - 无法显示用户保存的日期

Question

有人可以告诉如何在 Mat-Datepicker 中显示用户保存的日期吗？

最初从 get 服务（来自嵌套对象的数据，从另一个组件调用）获取 endDate 为 null。进入编辑模式时。正在选择值并保存它。在控制台中，它打印选定的日期。但在网络中它变为空。

this.endDate: string;

<mat-form-field>
<input matInput [value] = "endDate" [matDatepicker]="myDatepicker"  name="endDate" [(ngModel)]="endDate">
<mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker ></mat-datepicker>
</mat-form-field>

在保存方法中：

save(){
let obj = {
    endDate = this.endDate; // my ngModel
    }
}
updateChange(d){
this.endDate = d; // i can see the changed value here but not able to save
} 

保存数据的实际对象

const sample : OriginalModel = { 
demoKey : this.sample['key'].demo, 
demoKey2 : this.sample['key2'].demo2, 
endDate : this.endDate 
}

如何完成此操作以在编辑模式下显示用户保存的值？

请分享解决方案/工作堆栈闪电战。

提前致谢

标签： angulartypescriptdatepickerangular-material

Answer 1

我不知道您为什么要尝试将日期值包装到其中{}，但您可以使用以下语法来实现这一点，

您的组件方面，

sample: any = { demoKey: "", demoKey2: "", demoKey3: "", endDate: new Date }

在您的 html 方面，

<mat-form-field>
<input  matInput placeholder="demoKey1" name='demoKey' [(ngModel)]='sample.demoKey' >
...
</mat-form-field>

您不需要使用保存函数来设置两种方式的绑定变量，而是尝试使用obj.endDate函数来控制台日志，看看会发生什么神奇的事情。

这是您的案例的 stackblitz 示例，希望对您有所帮助。