@ ng-Bootstrap NgbDatepicker erfüllt "nicht zu 'ngModel' binden kann, da es nicht eine bekannte Eigenschaft von 'ngb-Datepicker' ist"

Question

I @ ng-Bootstrap/ng-Bootstrap und Angular2-cli verwenden

mit NgbDatepicker traf errs:

NgModule:

@NgModule({ 
    imports: [CommonModule,NgbModule.forRoot()], 
    declarations: [TestComponent], 
    exports: [TestComponent] 
}) 

componen T--

Export Klasse implementiert Testcomponent OnInit {

Modell: NgbDateStruct;

}

und html--

< NGB-Datumsauswahl #dp [(ngModel)] = "model"> </NGB-Datumsauswahl>

Wenn TestModule zu einem anderen Modul hinzugefügt wird,

@NgModule({ 
    imports: [SharedModule,LoginRoutingModule,TestModule], 
    declarations: [LoginComponent], 
}) 

und html:

<app-test></app-test> 

gibt es die err:

error_handler.js:47EXCEPTION: Uncaught (in promise): Error: Template parse errors: 
Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'. 
1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 
2. If 'ngb-datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 
(" 
    <ngb-datepicker #dp [ERROR ->][(ngModel)]="model"></ngb-datepicker> 

"): TestComponent@1:22ErrorHandler.handleError @ error_handler.js:47next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:119onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386 
error_handler.js:52ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:52next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:119onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386 
error_handler.js:53Error: Uncaught (in promise): Error: Template parse errors: 
Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'. 
1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 
2. If 'ngb-datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 
(" 
    <ngb-datepicker #dp [ERROR ->][(ngModel)]="model"></ngb-datepicker> 

"): TestComponent@1:22 
    at resolvePromise (zone.js:429) 
    at zone.js:406 
    at ZoneDelegate.invoke (zone.js:203) 
    at Object.onInvoke (ng_zone_impl.js:43) 
    at ZoneDelegate.invoke (zone.js:202) 
    at Zone.run (zone.js:96) 
    at zone.js:462 
    at ZoneDelegate.invokeTask (zone.js:236) 
    at Object.onInvokeTask (ng_zone_impl.js:34) 
    at ZoneDelegate.invokeTask (zone.js:235)ErrorHandler.handleError @ error_handler.js:53next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:119onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386 
zone.js:355Unhandled Promise rejection: Template parse errors: 
Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'. 
1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 
2. If 'ngb-datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 
(" 
    <ngb-datepicker #dp [ERROR ->][(ngModel)]="model"></ngb-datepicker> 

"): TestComponent@1:22 ; Zone: angular ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 
Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'. 
1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 
2. If 'ngb-datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 
(" 
    <ngb-datepicker #dp [ERROR ->][(ngModel)]="model"></ngb-datepicker> 

"): TestComponent@1:22 
    at TemplateParser.parse (http://localhost:4200/main.bundle.js:18077:19) 
    at RuntimeCompiler._compileTemplate (http://localhost:4200/main.bundle.js:42938:51) 
    at http://localhost:4200/main.bundle.js:42860:83 
    at Set.forEach (native) 
    at compile (http://localhost:4200/main.bundle.js:42860:47) 
    at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:99970:28) 
    at Object.onInvoke (http://localhost:4200/main.bundle.js:71761:37) 
    at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:99969:34) 
    at Zone.run (http://localhost:4200/main.bundle.js:99863:43) 
    at http://localhost:4200/main.bundle.js:100229:57consoleError @ zone.js:355_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386 
zone.js:357Error: Uncaught (in promise): Error: Template parse errors:(…)consoleError @ zone.js:357_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386 

Answer 1

Sie FormsModule fehlen. Versuchen Sie, wie das Importieren this-

import {FormsModule} from '@angular/forms'; 

und verwenden Sie es in AppModule wie this-

@NgModule({ 
    imports: [ BrowserModule, FormsModule, NgbModule ], 

Sie können ngbDatepicker verwenden wie diese allzu

<input class="form-control" placeholder="yyyy-mm-dd" name="dp1" [(ngModel)]="newItem.EndTime" ngbDatepicker #d1="ngbDatepicker" required> 

Probe Plunker: https://plnkr.co/edit/ZC3dOX9anbbNUMPEEd5W?p=preview

Sehen Sie, ob das hilft.