@ ng-bootstrap/ng-bootstrap datepickerを実際にカレンダーを表示することができません。私は最初に、複数のカレンダーのドキュメントのplunkrの例を使って自分のプロジェクト内で試してみました。私が得たのは、内部に何もない、約4ピクセルの高さと30ピクセルの幅の小さな四角形でした。Angular 2 datepickerのng-bootstrapがカレンダーをポップアップしない
Iは、次いで、SO検索しthis example and plunkrを発見し、同じ結果と、それを試してみました。
Angular 2 CLIでまったく新しいAngularアプリケーションを生成し、@ ng-bootstrap/ng-bootstrapをインストールし、最後のplunkrのコードを追加しました。これにより、結果がさらに悪化し、セレクタボタンが表示されなくなります。
誰もがこれへの洞察を持っていますか?
update:私はフォントの素晴らしい参照をしていないことに気付きました。その後、私のコントロールはこのように見え、カレンダーはポップダウンしますが、これは良いことではありません!
アップデート2:まだこの問題を解決しようとしています。私は同様の結果を持つ別のライブラリを試しました - ドロップダウンは機能しません。私はこれが入れ子になったコンポーネントで動作していないドロップダウンの問題だと思っています。私は、動作しているバージョンのすべてのライブラリを非動作と比較しており、すべて同じです。唯一の違いは、作業用のコンポーネントが最上位のコンポーネントにあり、非動作用のコンポーネントがネストされたコンポーネントにあることです。
更新3:解決済み。
2件が関係していました。 1 - フォームグループと入力グループクラスを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