ngx - средство выбора даты не отображается в виде angular6

Question

Я пытаюсь импортировать средство выбора даты ngx Bootstrap в мое приложение Angular6, для чего я выполнил следующие шаги

в npm установить ngx-bootstrap

npm install ngx-bootstrap --save

Установлен бутстрап 4

npm установить начальную загрузку @ 4 - сохранить

В файле angular.json и укажите путь к таблице стилей Bootstrap (bootstrap.min.css) в свойстве стилей

  "styles": [

            "src/styles.css",
           "node_modules/bootstrap/dist/css/bootstrap.min.css",
           "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"

        ],

Для использования средства выбора даты ngx-bootstrap в Angular:

В файле app.module.ts, импортированном BsDatepickerModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { FormGroup } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StudentParentRegistrationComponent } from './student-parent-registration/student-parent-registration.component';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@NgModule({
  declarations: [
    AppComponent,
    StudentParentRegistrationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    BsDatepickerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML-файл

<nav class="navbar navbar-expand-lg">Header
</nav>
<div class="container">
  <h2 class="text-center">Registration</h2>
  <h3>Student Registration</h3>


  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="usn" class="control-label">USN</label>
        <input type="usn" class="form-control" id="usn" name="usn" placeholder="USN">
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="firstName" class="control-label">First Name</label>
        <input type="firstName" class="form-control" id="firstName" name="firstName" placeholder="FirstName">
      </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
<label for="dateOfBirth" class="control-label">Date Of Birth</label>
<input type="text" class="form-control" id="dateOfBirth" name="dateOfBirth" bsDatePicker [(ngModel)]="dateOfBirth" placeholder="DateOfBirth">
</div>
</div>
</div>

</div>
<div class="card-footer">
  footer
</div>

После выполнения этих действий средство выбора даты не отображается. Кто-нибудь, пожалуйста, помогите мне решить эту проблему.

Answer 1

вам нужно вызвать метод show.

вы можете вызвать его непосредственно в шаблоне, например так:

<input type="text" class="form-control" id="dateOfBirth" name="dateOfBirth" bsDatePicker #dp="bsDatepicker" [(ngModel)]="dateOfBirth" placeholder="DateOfBirth">

// call the dp.show() method either by attaching the click event on the input or add a button alongside it

В качестве альтернативы внедрить его в компонент или службу и вызвать метод в