【发布时间】：2017-05-15 05:31:57
【问题描述】：
我无法让 @ng-bootstrap/ng-bootstrap 日期选择器实际显示日历。我首先在我自己的项目中尝试使用多个日历文档中的 plunkr 示例。我得到的只是一个小矩形，高约 4 像素，宽约 30 像素，里面什么都没有。
然后我搜索了 SO 并找到了this example and plunkr 并尝试了它，结果相同。
我使用 Angular 2 CLI 生成了一个全新的 Angular 应用程序，安装了 @ng-bootstrap/ng-bootstrap，并添加了上一个 plunkr 中的代码。这会产生更糟糕的结果，甚至不显示选择器按钮。
有人对此有所了解吗？
更新：我意识到我没有引用 font-awesome，所以之后我的控件看起来像这样并且日历确实弹出，但这不是一个好看的外观！
更新 2：仍在尝试解决此问题。我尝试了一个不同的库，结果相似——下拉菜单不起作用。我相信这是下拉菜单在嵌套组件中不起作用的问题。我已经将工作版本的所有库与非工作版本进行了比较，它们都是相同的。唯一的区别是工作的在顶层组件中，非工作的在嵌套组件中。
更新 3：已解决。
涉及两件事。 1 - 我必须将 form-group 和 input-group 类合并到一个 div 中
2 - 控制台中出现未定义变量的 TypeScript 错误。我不知道为什么这会阻止控件下拉日历，因为该变量与表单无关，但确实如此。一旦我解决了这个问题，日历就会正确呈现。
这是我的示例代码：
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>【问题讨论】：
-
请在您的问题中添加minimal reproducible example 您尝试过的内容。我们应该怎么知道您的代码缺少什么？
-
好主意，但是使用 Plunkr 的人不知道底层基础设施是什么，有哪些库等等。我觉得这无济于事，因为我使用了一个现有的完整且可验证的示例来开始与，但它没有工作。
-
随意添加解决方案作为答案（而不是问题的一部分）并将其标记为这样。
-
我完全同意拥有一个 plunkr 是解决
ng问题的方法。但是，您最初的问题仅指向您找到的示例（而不是您所做的），因此如果我们看不到它，几乎不可能知道您的代码有什么问题。这就是为什么建议您在问题中添加minimal reproducible example - 否则，我们都在猜测 -
在我的情况下，我必须包含
bootstrap: 4.0.0-beta才能使日历选择器弹出工作。
标签： angular typescript ng-bootstrap