Angular使用ngbDatepicker选完日期后无法显示选中值如何解决

你遇到的选择日期后看不到值的问题，核心有两个可能：

• 项目没有导入FormsModule，导致[(ngModel)]双向绑定失效，选中的日期无法同步到myDate变量
• ngbDatepicker默认返回的是包含year、month、day属性的结构体对象，直接用{{myDate}}插值输出对象会显示为[object Object]，看不到具体日期值

方案1：直接适配字符串格式日期（推荐） #

可以通过自定义日期适配器，让选中的日期直接以yyyy-mm-dd格式的字符串绑定到myDate变量

1. 新增自定义适配器文件ngb-date-string-adapter.ts

import { NgbDateAdapter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';

@Injectable()
export class NgbDateStringAdapter extends NgbDateAdapter<string> {
  // 将绑定的字符串转成datepicker识别的结构体
  fromModel(value: string | null): NgbDateStruct | null {
    if (!value) return null;
    const [year, month, day] = value.split('-').map(Number);
    return { year, month, day };
  }

  // 将datepicker返回的结构体转成字符串
  toModel(date: NgbDateStruct | null): string | null {
    if (!date) return null;
    return `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`;
  }
}

2. 在AppModule中注册适配器和必要依赖

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgbDatepickerModule, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { NgbDateStringAdapter } from './ngb-date-string-adapter';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule, // 必须导入，否则ngModel不生效
    NgbDatepickerModule
  ],
  providers: [
    // 注册自定义字符串适配器
    { provide: NgbDateAdapter, useClass: NgbDateStringAdapter }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

修改完成后，myDate变量就会自动同步为yyyy-mm-dd格式的字符串，直接插值{{myDate}}就能正常显示。

方案2：临时转换展示 #

如果不需要绑定字符串，只是想临时展示选中的日期，可以直接在模板中拆解结构体属性显示：

<h1>My date => {{myDate?.year}}-{{myDate?.month?.toString().padStart(2,'0')}}-{{myDate?.day?.toString().padStart(2,'0')}} </h1>

内容的提问来源于stack exchange，提问作者elodie