Fatal编程技术网
  • javascript/
  • Javascript 无法使用ng引导日期选择器

Javascript 无法使用ng引导日期选择器

javascript angular bootstrap-4

Javascript 无法使用ng引导日期选择器,javascript,angular,datepicker,bootstrap-4,Javascript,Angular,Datepicker,Bootstrap 4,我从《英雄之旅》中克隆了quickstart项目，并尝试添加ng引导日期选择器，但它不起作用。我的项目： app.module.ts： import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import {

我从《英雄之旅》中克隆了quickstart项目，并尝试添加ng引导日期选择器，但它不起作用。我的项目：

app.module.ts：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent }  from './app.component';
import { MyDatePicker } from './datepicker/my-datepicker.component';

@NgModule({
  imports:      [ BrowserModule, NgbModule.forRoot() ],
  declarations: [ AppComponent, MyDatePicker ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <h1>Hello {{name}}</h1>
  <my-datepicker></my-datepicker>
  `,
})
export class AppComponent  { name = 'Angular'; }

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

const now = new Date();

@Component({
    selector: 'my-datepicker',
    templateUrl: './my-datepicker.component.html',
    styleUrls: [ './my-datepicker.component.css' ]
})
export class MyDatePicker {

    title: string = 'My datepicker';

    model: NgbDateStruct;
    date: {year: number, month: number};

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

}
my-datepicker.component.html

{{ title }}

<p>Simple datepicker</p>

<ngb-datepicker></ngb-datepicker>
但它不起作用。我得到的结果是：

很奇怪，为什么看起来如此

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>


角度快速启动
System.import（'main.js'）.catch（函数（err）{console.error（err）；}）；
正在此处加载AppComponent内容。。。
更新index.html后，datepicker看起来很好，但现在我无法绑定ngModel，出现了一个错误：

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
    at bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
zone.js:655 Unhandled 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.
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:///app/datepicker/my-datepicker.component.html@8:20 ; Zone: <root> ; Task: Promise.then ; Value: 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>

Uncaught错误：引导程序的JavaScript需要jQuery。jQuery必须包含在引导的JavaScript之前。
在bootstrap.min.js:6
（匿名）@bootstrap.min.js:6
zone.js:655未处理的承诺拒绝：模板分析错误：
无法绑定到“ngModel”，因为它不是“ngb datepicker”的已知属性。
1.如果“ngb datepicker”是一个角度组件，并且具有“ngModel”输入，则验证它是否是此模块的一部分。
2.如果“ngb datepicker”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。
3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
简单日期选择器

][（ngModel）]=“模型”（导航）=“日期=$event.next”>


“”：ng:///app/datepicker/my-datepicker.component。html@8:20 ; 区域：；任务：承诺；值：错误：模板分析错误：
无法绑定到“ngModel”，因为它不是“ngb datepicker”的已知属性。
1.如果“ngb datepicker”是一个角度组件，并且具有“ngModel”输入，则验证它是否是此模块的一部分。
2.如果“ngb datepicker”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。
3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
简单日期选择器

][（ngModel）]=“模型”（导航）=“日期=$event.next”>
参考index.html文件中的jquery脚本

src="https://code.jquery.com/jquery-2.x-git.min.js"
在引导脚本之前，因为它依赖于jquery

请参考index.html文件中的jquery脚本

src="https://code.jquery.com/jquery-2.x-git.min.js"
在使用依赖于jquery的引导脚本之前，我遇到了同样的问题，并根据

以下是您需要在package.json所在的同一文件夹上运行的命令（但请记住阅读我上面发布的链接）：

我也遇到了同样的问题，通过根据

以下是您需要在package.json所在的同一文件夹上运行的命令（但请记住阅读我上面发布的链接）：

您正在加载引导4 css吗？：）如何做以及我应该将这些css放在哪里？更新
index.html
文件对于该项目来说，更简单的方法是像任何其他html网站一样在html上添加标记。好的，我添加到index.html，但现在我得到一个错误：未捕获错误：Bootstrap的JavaScript需要jQuery。jQuery必须包含在Bootstrap的JavaScript之前。在Bootstrap。min.js:6你正在加载bootstrap 4 css吗？：）如何操作以及我应该将这些css放在哪里？更新
index.html
文件对于该项目来说，更简单的方法是像任何其他html网站一样在html上添加标记。好的，我添加到index.html，但现在我得到一个错误：未捕获错误：bootstrap的JavaScript需要jQuery。jQuery必须在e Bootstrap的JavaScript.at Bootstrap.min.js:6 
npm install bootstrap@4.0.0-alpha.6 --save