angular Datepickerとの双方向バインディングが上手くいかない

実現したいこと

このライブラリ「Date Timepicker Single Column」を利用して、nowのボタンを押下したときに時間を5分刻みに丸めを行い画面に反映をさせたいです。
(例えば24分を選択したら25分、47分なら50分が設定されるイメージになります)

発生している問題・分からないこと

Date Timepickerのnowボタンを押下しても、データバインディングされない。

エラーメッセージ

error

1エラーは出ていません。

該当のソースコード

Typescript

1// データ2 doc = {3 'stream_date': null4 };5 6onStreamStartDateChanged(newDate: Date) {7 // 日付から分を取得'8 console.log('newDate:'+newDate);9 const date = new Date(newDate);10 // 日付から分を取得11 const minutes = date.getMinutes();12 // 最も近い5分刻みに分を丸める13 const roundedMinutes = 5 * Math.ceil(minutes / 5);14 if (roundedMinutes >= 60) {15 // 分が60になった場合、時間を1つ進める16 date.setHours(date.getHours() + 1);17 date.setMinutes(0);18 } else {19 // それ以外の場合、分を丸めた値に設定20 date.setMinutes(roundedMinutes);21 }22 console.log('Before :', this.doc.stream_date);23 this.doc.stream_date = date;24 console.log('After setting to null:', this.doc.stream_date);25 // 変更検出をトリガーしてビューを更新26 this.cdr.detectChanges();27}

html

1 <td class="col-4 td-border-none1">2 <input type="text" nbInput fullWidth name="stream_date" placeholder="YYYY/MM/DD HH:mm"3 [nbDatepicker]="stream_date" [(ngModel)]="doc.stream_date" autocomplete="off" readonly4 status="{{stream_date_focus && !doc.stream_date ? 'danger': 'basic'}}"5 nbPopover="{{stream_date_focus && !doc.stream_date ? stream_date_popover : ''}}"6 nbPopoverTrigger="hint" nbPopoverPlacement="top" (blur)="streamDateBlur()">7 </td>8<nb-date-timepicker #stream_date format="yyyy/MM/dd HH:mm" singleColumn [step]="5"9 (dateTimeChange)="onStreamStartDateChanged($event)"></nb-date-timepicker>

試したこと・調べたこと

上記の詳細・結果

コンソールに出るログを確認すると、以下のような感じになります。
newDateWed May 01 2024 19:16:03 GMT+0900 (日本標準時)
broadcasts-form.component.ts:1755 Before : Wed May 01 2024 19:16:02 GMT+0900 (日本標準時)
broadcasts-form.component.ts:1757 After : Wed May 01 2024 19:20:03 GMT+0900 (日本標準時)

この結果から this.doc.stream_dateが変更されてhtml側も[(ngModel)]="doc.stream_dateが聞いて画面上では19:20の表示になっているはずが、19:16の表示となっている状態です。

typescriptの最後の this.cdr.detectChanges();を実行すると画面は19:20になるのですが、画面の切り替えなどが起こると19:16の表示に戻ってしまいます。

doc.stream_dateがなぜtypescript側とhtml側でバインディングが上手くいかないのかが全くつかめておらず、手が止まってしまいました。
ご意見いただけると助かります。

補足

特になし

コメントを投稿

0 コメント