Question

我正在尝试将ngx Bootstrap datepicker导入我的Angular6应用程序中，因为我已按照以下步骤进行操作

到npm安装ngx-bootstrap

npm install ngx-bootstrap --save

已安装的引导程序4

npm install bootstrap @ 4 --save

在angular.json文件中，并在styles属性中指定Bootstrap样式表（bootstrap.min.css）的路径

  "styles": [

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

        ],

在Angular中使用ngx-bootstrap datepicker：

在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方法。

您可以像这样直接在模板中调用它：

import tkinter as tk


class Interface(tk.Tk):
    def __init__(self):
        super().__init__()
        self.can = tk.Canvas(self, background="green", width=500, height=500)
        self.can.pack()
        self.bind('<Button-1>', self.choice)

    def choice(self, event):
        popup = tk.Toplevel()
        popup.attributes('-topmost', 'true')
        var = tk.IntVar()

        def callback():
            popup.destroy()
            print("choice:", var.get())

        tk.Radiobutton(popup, text="Zero", value=0, variable=var, indicator=0).pack()
        tk.Radiobutton(popup, text="0ne", value=1, variable=var, indicator=0).pack()
        tk.Radiobutton(popup, text="Confirm", fg="red", indicator=0,
                       command=callback).pack()
        popup.mainloop()


main = Interface()
main.mainloop()

或者将其注入组件或服务中并在其中调用方法

ngx-日期选择器未以angular6形式显示

1 个答案: