Angular 2 datepicker的ng-bootstrap不会弹出日历

我无法获取@ ng-bootstrap/ng-bootstrap datepicker来实际显示日历。我第一次尝试在我自己的项目中使用文档中的多个日历中的plunkr示例。我得到的只是一个小矩形，高约4像素，宽30像素，里面什么也没有。Angular 2 datepicker的ng-bootstrap不会弹出日历

我再搜查SO，发现this example and plunkr和试了一下，结果相同。

我使用Angular 2 CLI生成了一个全新的Angular应用程序，安装了@ ng-bootstrap/ng-bootstrap，并添加了最后一个plunkr的代码。这会导致更糟的结果，甚至不会显示选择器按钮。

是否有人洞察到这一点？

更新：我意识到我没有字体真棒引用，所以之后，我的控件看起来像这样，日历弹出下来，但这不是一个好看！

更新2：仍在试图解决这个问题。我尝试了一个类似结果的不同库 - 下拉式不起作用。我相信这是一个问题，下拉只是不适用于嵌套组件。我将工作版本的所有库与非工作库进行了比较，它们都是一样的。唯一的区别是工作的是在顶层组件中，非工作的是在嵌套组件中。

更新3：已解决。

有2件事涉及到。 1 - 我不得不形式组和输入组的类组合成一个的div

2 - 有一个在控制台未定义的变量一个打字稿错误。我不知道为什么这会阻止控制权下降日历，因为该变量与表单无关，但它确实如此。一旦我解决了这个问题，日历就能正确呈现。

这里是我的示例代码工作的：

import { Component, OnInit } from '@angular/core'; 
 
import {FormControl, FormGroup} from "@angular/forms"; 
 

 
@Component({ 
 
    selector: 'app-sub', 
 
    templateUrl: './sub.component.html', 
 
    styleUrls: ['./sub.component.css'] 
 
}) 
 
export class SubComponent implements OnInit { 
 
    thisForm: FormGroup; 
 

 
    constructor() { } 
 

 
    ngOnInit() { 
 
    this.thisForm = new FormGroup({ 
 
     dp1: new FormControl('') 
 
    }); 
 
    } 
 

 
    onSubmit(){} 
 
}

<form [formGroup]="thisForm" (ngSubmit)="onSubmit()"> 
 

 
    <div class="form-group input-group"> 
 
    <input class="form-control" placeholder="yyyy-mm-dd" id="dp1" form-control-name="dp1" name="dp1" ngbDatepicker #d1="ngbDatepicker" required> 
 
    <div class="input-group-addon" (click)="d1.toggle()" > 
 
     <i class="fa fa-calendar" aria-hidden="true"></i> 
 
    </div> 
 
    </div> 
 

 
    <button class="btn btn-primary" type="submit" [disabled]="!thisForm.valid">Submit</button> 
 
</form>

来源

2016-12-31 glitchbane

请添加您试过的问题的[mcve]。我们还应该怎么知道你的代码丢失了？ – ochi

好主意，但是使用Plunkr的人不知道底层的基础设施是什么，有什么样的图书馆等等，我觉得它不会有帮助，因为我用一个现有的完整和可验证的例子开始，它没有工作。 – glitchbane

随意添加解决方案作为答案（而不是问题的一部分）并将其标记为这样。 – ochi

我正经历着类似的问题在我的NG-引导日历弹出没有工作。 John_J在评论中也提到了什么解决了我的问题。

实际上，ng-bootstrap存储库包含一组基于Bootstrap标记和CSS的原生Angular指令。因此不需要依赖jQuery或Bootstrap的JavaScript。唯一需要的依赖关系是：

角度（需要角度版本4或更高版本，使用4.0.3进行测试）引导CSS（使用4.0测试）。0-beta）

解决方案很简单。

在您的index.html： -

添加 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">到您的<head>。
然后添加 - <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

只是你的结束标记上方。然后你去...日历开始工作完全罚款。这是一个link到网站，你可以从中获得更多的细节。

来源

2017-11-03 13:22:28 Invoker

Angular 2 datepicker的ng-bootstrap不会弹出日历

回答

相关问题