Question

大家好我试图导入一个简单的日期选择器，我想我按照以下描述的例子：https://ng-bootstrap.github.io/#/getting-started项目是新鲜的，这里有新的文件是我的文件：

app.component.html：

<p>Simple datepicker</p>

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

<hr/>

<button class="btn btn-sm btn-outline-primary" (click)="selectToday()">Select Today</button>
<button class="btn btn-sm btn-outline-primary" (click)="dp.navigateTo()">To current month</button>
<button class="btn btn-sm btn-outline-primary" (click)="dp.navigateTo({year: 2013, month: 2})">To Feb 2013</button>

<hr/>

<pre>Month: {{ date.month }}.{{ date.year }}</pre>
<pre>Model: {{ model | json }}</pre>

app.component.ts：

import { Component } from '@angular/core';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

const now = new Date();

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  model: NgbDateStruct;
date: {year: number, month: number};

selectToday() {
  this.model = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
}
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

浏览器控制台错误：

Uncaught 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.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<p>Simple datepicker</p>

<ngb-datepicker #dp [ERROR ->][(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

<hr/>
"): ng:///AppModule/AppComponent.html@2:20
    at syntaxError (http://127.0.0.1:4200/vendor.bundle.js:25134:34)
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://127.0.0.1:4200/vendor.bundle.js:36372:19)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://127.0.0.1:4200/vendor.bundle.js:50566:39)
    at http://127.0.0.1:4200/vendor.bundle.js:50485:62
    at Set.forEach (native)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://127.0.0.1:4200/vendor.bundle.js:50485:19)
    at http://127.0.0.1:4200/vendor.bundle.js:50372:19
    at Object.then (http://127.0.0.1:4200/vendor.bundle.js:25123:143)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://127.0.0.1:4200/vendor.bundle.js:50371:26)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://127.0.0.1:4200/vendor.bundle.js:50300:37)

它显示了一个空白页面，直到我删除了这一行：html文件中的<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>，然后它显示了一些内容，但它没有，有什么帮助吗？

使用Angular4 ng-bootstrap datepicker

0 个答案: