Mat-DatePicker - [(ngModel)] - не может показать дату, сохраненную пользователем - PullRequest
Новая
       12

Mat-DatePicker - [(ngModel)] - не может показать дату, сохраненную пользователем

0 голосов
/ 10 апреля 2019

Может ли кто-нибудь сказать, как отобразить сохраненную пользователем дату в Mat-Datepicker?

изначально я получаю endDate как ноль от службы get (данные из вложенного объекта, вызов из другого компонента).при переходе в режим редактирования.выбираю значение и сохраняю его.В консоли печатается выбранная дата.но в сети он обнуляется. 

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 
}

как это сделать, чтобы показатьпользователь сохранил значение в режиме редактирования?

любезно поделитесь решением / рабочим стеком.

Заранее спасибо

1 Ответ

1 голос
/ 10 апреля 2019

Я не знаю, почему вы пытаетесь свернуть значение даты в {}, но вы можете добиться этого, используя следующий синтаксис:

Ваша сторона компонента, 

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 для вашего случая, надеюсь, это поможет.

Stackblitz view

...