将 ng2-bootstrap datepicker 与角度 2-seed 项目一起使用时模板解析错误
Template parse error when using ng2-boostrap datepicker with angular2-seed project
我试图在 angular2-seed 项目中使用 ng2-bootstrap 的日期选择器,但出现以下错误。我使用的是最新版本的 angular2-seed 项目 (angular 2.0.0-rc.3)
预先感谢您对我做错的任何建议。
platform-browser.umd.js:2311 EXCEPTION: Error: Uncaught (in promise): Template parse errors:No provider for NgModel ("eight:290px;">
<!--<datepicker [(ngModel)]="date" showWeeks="true"></datepicker>-->
[ERROR ->]<datepicker [(ngModel)]="date" [showWeeks]="true"></datepicker>
</div>"): AboutComponent@20:8
我的about.component.html
<wrapper>
<alert type="info">ng2-bootstrap hello world!</alert>
<div style="display:inline-block; min-height:290px;">
<datepicker [(ngModel)]="date" [showWeeks]="true"></datepicker>
</div>
<alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
{{ alert?.msg }}
</alert>
<alert dismissOnTimeout="5000">This alert will dismiss in 5s</alert>
<button type="button" class='btn btn-primary' (click)="addAlert()">Add Alert</button>
我的about.component.ts
import {Component} from '@angular/core';
import {AlertComponent, DatePickerComponent} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'wrapper',
moduleId: module.id,
templateUrl: './about.component.html',
styleUrls: ['./about.component.css'],
directives: [
AlertComponent,
DatePickerComponent,
CORE_DIRECTIVES
]
})
export class AboutComponent {
date:Date = new Date();
alerts:Array<Object> = [
{
type: 'danger',
msg: 'Oh snap! Change a few things up and try submitting again.'
},
{
type: 'success',
msg: 'Well done! You successfully read this important alert message.',
closable: true
}
];
closeAlert(i:number) {
this.alerts.splice(i, 1);
}
addAlert() {
this.alerts.push({msg: 'Another alert!', type: 'warning', closable: true});
}
}
我的Bootstrap代码
import { APP_BASE_HREF } from '@angular/common';
import { disableDeprecatedForms, provideForms } from '@angular/forms/index';
import { enableProdMode } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { AppComponent } from './app.component';
if ('<%= ENV %>' === 'prod') { enableProdMode(); }
bootstrap(AppComponent, [
disableDeprecatedForms(),
provideForms(),
APP_ROUTER_PROVIDERS,
{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
}
]);
PR 已合并,所以现在您需要可以使用
- NgModel 或来自@angular/forms
的FORM_DIRECTIVES
- 和bootstrap(...,[...disableDeprecatedForms(),provideForms(),...]
我试图在 angular2-seed 项目中使用 ng2-bootstrap 的日期选择器,但出现以下错误。我使用的是最新版本的 angular2-seed 项目 (angular 2.0.0-rc.3) 预先感谢您对我做错的任何建议。
platform-browser.umd.js:2311 EXCEPTION: Error: Uncaught (in promise): Template parse errors:No provider for NgModel ("eight:290px;">
<!--<datepicker [(ngModel)]="date" showWeeks="true"></datepicker>-->
[ERROR ->]<datepicker [(ngModel)]="date" [showWeeks]="true"></datepicker>
</div>"): AboutComponent@20:8
我的about.component.html
<wrapper>
<alert type="info">ng2-bootstrap hello world!</alert>
<div style="display:inline-block; min-height:290px;">
<datepicker [(ngModel)]="date" [showWeeks]="true"></datepicker>
</div>
<alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
{{ alert?.msg }}
</alert>
<alert dismissOnTimeout="5000">This alert will dismiss in 5s</alert>
<button type="button" class='btn btn-primary' (click)="addAlert()">Add Alert</button>
我的about.component.ts
import {Component} from '@angular/core';
import {AlertComponent, DatePickerComponent} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'wrapper',
moduleId: module.id,
templateUrl: './about.component.html',
styleUrls: ['./about.component.css'],
directives: [
AlertComponent,
DatePickerComponent,
CORE_DIRECTIVES
]
})
export class AboutComponent {
date:Date = new Date();
alerts:Array<Object> = [
{
type: 'danger',
msg: 'Oh snap! Change a few things up and try submitting again.'
},
{
type: 'success',
msg: 'Well done! You successfully read this important alert message.',
closable: true
}
];
closeAlert(i:number) {
this.alerts.splice(i, 1);
}
addAlert() {
this.alerts.push({msg: 'Another alert!', type: 'warning', closable: true});
}
}
我的Bootstrap代码
import { APP_BASE_HREF } from '@angular/common';
import { disableDeprecatedForms, provideForms } from '@angular/forms/index';
import { enableProdMode } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { AppComponent } from './app.component';
if ('<%= ENV %>' === 'prod') { enableProdMode(); }
bootstrap(AppComponent, [
disableDeprecatedForms(),
provideForms(),
APP_ROUTER_PROVIDERS,
{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
}
]);
PR 已合并,所以现在您需要可以使用
- NgModel 或来自@angular/forms 的FORM_DIRECTIVES
- 和bootstrap(...,[...disableDeprecatedForms(),provideForms(),...]