Я не могу получить @ ng-bootstrap/ng-bootstrap datepicker, чтобы фактически показать календарь. Сначала я попытался в своем собственном проекте, используя пример plunkr из документации для нескольких календарей. Все, что у меня было, это маленький прямоугольник размером около 4 пикселей и шириной 30 пикселей, внутри ничего нет.ng-bootstrap для Angular 2 datepicker не всплывает в календаре
Я тогда искал SO и нашел this example and plunkr и попробовал его, с тем же результатом.
Я сгенерировал совершенно новое приложение с угловыми углами с Угловым 2 CLI, установил @ ng-bootstrap/ng-bootstrap и добавил код из последнего plunkr. Это дает еще худшие результаты, даже не отображая кнопку селектора.
Кто-нибудь есть понимание этого?
обновление: Я понял, что у меня не было шрифтов, а после этого мои элементы управления выглядели так, и каландр всплывает, но это не очень хорошо!
Update 2: Тем не менее пытается решить эту проблему. Я попробовал другую библиотеку с аналогичными результатами - выпадающее меню не работает. Я считаю, что это проблема с выпадающими списками, которые просто не работают во вложенных компонентах. Я сравнивал все библиотеки для рабочей версии с нерабочими, и они все одинаковы. Единственное различие заключается в том, что рабочий находится в компоненте верхнего уровня, а нерабочий - во вложенном компоненте.
Обновление 3: Решено.
2 вещи были задействованы. 1 - Мне пришлось объединить классы формы и группы входных данных в один 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>
Пожалуйста, добавьте [mcve] того, что вы пробовали на свой вопрос. Как еще мы должны знать, что ваш код отсутствует? – ochi
Отличная идея, но с использованием Plunkr никто не знает, что такое базовая инфраструктура, какие библиотеки существуют и т. Д. Я чувствовал, что это не поможет, так как я использовал существующий полный и проверяемый пример для начала, и он не работал , – glitchbane
Не стесняйтесь добавлять решение в качестве ответа (вместо части вопроса) и пометить его как таковое. – ochi