我应该使用下面的命令npm install ngx-bootstrap bootstrap --save在angular2中安装ngx-bootstrap

包含在angular-cli.json中的行下方

 "../node_modules/bootstrap/dist/css/bootstrap.min.css".

在app.component.html中添加以下行

  <div  class="dropdown">
     <a class="pull-right text-center btn btn-setting dropdown-toggle"  data-toggle="dropdown" aria-haspopup="true" aria- expanded="true"><i class="fa fa-cog"></i></a>
     <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation">  <a role="menuitem" tabindex="-1" href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-cog"></i>Settings</a></li>
     </ul>                                      
  </div>

上面的代码不适用于引导下拉菜单，但下拉菜单不起作用。请帮我。

我的package.json是

{
 "name": "offline-new",
 "version": "0.0.0",
 "license": "MIT",
 "angular-cli": {},
 "scripts": {
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
 },
"private": true,
"dependencies": {
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": …

我正在尝试将自定义样式添加到 ngx-bootstrap 的选项卡中以获取角度。我想要两件事 1) 删除边框线和 2) 将背景颜色设置为活动选项卡。

但似乎没有任何效果

HTML代码

div >
<tabset>
   <tab customClass="customClass" heading="Home"></tab>
   <tab heading="Profile"></tab>
   <tab heading="About us"></tab>
</tabset>
</div>

CSS 代码

.customClass > a{
background-color:silver !important;
border-bottom: none !important;
outline: 0 !important; 
}

tab>active{
color:rgb(58, 45, 128)
}

什么可能是解决方案？？？

我正在尝试使用 ngx-bootstrap 在弹出框的右上角制作一个手动弹出框关闭按钮。我知道要添加 x 按钮，我们必须使用 bootstrap 中的 &Times。

https://v4-alpha.getbootstrap.com/utilities/close-icon/

但是我不知道如何将它实现到我的标题中，因为我试图将它添加到右上角。

 content: string = "content of popover ";
 Title: string = "Title of popover";

 <a [popover]="content" container="body" placement="top" [popoverTitle]="Title" >Making this popover</a>
              

这是我正在使用的链接。我正在使用这个例子，模板和组件。

我的plunker基本上，简单地说，我需要标题右上角的X。

在我的 Angular 单元测试中，尽管我已经导入了DatepickerModule.forRoot()，但我得到：

Error: Template parse errors:
    Can't bind to 'bsConfig' since it isn't a known property of 'input'. ("
          class="form-control datepicker datetime-picker"
          bsDatepicker
          [ERROR ->][bsConfig]="myConfig"
          [(ngModel)]="myDate"
        >
    "): ng:///DynamicTestModule/DatetimePickerComponent.html@6:6
        at syntaxError node_modules/@angular/compiler/esm5/compiler.js:486:22)
        at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse node_modules/@angular/compiler/esm5/compiler.js:24674:1)
        at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate node_modules/@angular/compiler/esm5/compiler.js:34629:1)
        at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate node_modules/@angular/compiler/esm5/compiler.js:34604:1)
        at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34505:48
        at Set.forEach (<anonymous>)
        at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents node_modules/@angular/compiler/esm5/compiler.js:34505:1)
        at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34393:1
        at Object.then node_modules/@angular/compiler/esm5/compiler.js:475:33)
        at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndAllComponents node_modules/@angular/compiler/esm5/compiler.js:34391:1)
    Expected undefined to be truthy.
        at UserContext.<anonymous> src/app/components/my-spec.spec.ts:41:23)
        at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1)
        at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/proxy.js:128:1)

所需的输出是BsDatePicker,由于某种原因给我错误:无法读取未定义的属性'schedule'.
并且还有警告BsDatepickerModule正在开发中,BREAKING CHANGES是可能的,PLEASE,读取changelog

Angular-CLI版本1.7.4,ngx-bootstrap版本3.0.0,Angular 5

这是html
<input type="text" [(ngModel)]="dateOfBirth" name="dateOfBirth" id="dateOfBirth" bsDatepicker class="form-control"/>

的代码: 这是代码app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { CreateEmployeeComponent } from './employee/create-employee/create-employee.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    CreateEmployeeComponent,
    PageNotFoundComponent …

我正在将ngx-bootstrap库（Angular6、Bootstrap4）用于 typeahead 组件。当我们开始输入时它运行良好。但我想实现以下目标：

用户有不同的选择。说：ai、ax、az等。用户选择一个，并且预先输入应该自动开始搜索选定的文本。这意味着用户无需在输入框中输入任何内容即可开始搜索，

只需单击其中一个选项，typeahead 将显示可用选项，用户可以选择准确的选项。

所以基本上，我想避免在文本框中手动输入并通过代码触发预输入填充事件。

我能做到吗？

提前致谢，

文奇

我正在学习 Udemy ( https://www.udemy.com/course/build-an-app-with-aspnet-core-and-angular-from-scratch )的课程，到目前为止，很好，直到我尝试安装 ngx-bootstrap 。

我安装npm install ngx-bootstrap --save在一个Angular9项目上，并ng build收到以下错误：

Compiling ngx-bootstrap : es2015 as esm2015

ERROR in Failed to find exported name of node (class ButtonRadioGroupDirective {
    constructor(cdr) {
        this.cdr = cdr;
        this.onChange = Function.prototype;
        this.onTouched = Function.prototype;
    }
    get value() {
        return this._value;
    }
    set value(value) {
        this._value = value;
    }
    writeValue(value) {
        this._value = value;
        this.cdr.markForCheck();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    } …

我正在尝试使用 ngx-datepicker 但无论我做什么都会使标题（datepicker 导航部分）为空。

预期结果：
https://i.stack.imgur.com/4dBOO.png
当前结果： https:
//i.stack.imgur.com/UMjnY.png
https://i.stack.imgur.com/yhpOu。 PNG

我的日期选择器组件代码：

• 模板代码：

  <ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

• 组件.ts

  import { Component, OnInit } from '@angular/core';
  import {NgbCalendar, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
  
  @Component({
    selector: 'app-date-picker',
    templateUrl: './date-picker.component.html',
    styleUrls: ['./date-picker.component.scss']
  })
  export class DatePickerComponent implements OnInit {
  
    model: NgbDateStruct;
    date: {year: number, month: number};
  
    constructor(private calendar: NgbCalendar) {
    }
  
    ngOnInit(): void {
    }
  }
  

  Run Code Online (Sandbox Code Playgroud)

• 依赖项：

    "@angular/animations": "~11.1.2",
    "@angular/common": "~11.1.2",
    "@angular/compiler": "~11.1.2",
    "@angular/core": "~11.1.2",
    "@angular/forms": "~11.1.2",
    "@angular/platform-browser": "~11.1.2",
    "@angular/platform-browser-dynamic": "~11.1.2",
    "@angular/localize": "11.0.9", …

  Run Code Online (Sandbox Code Playgroud)

我无法在ngx-bootstrap日期范围选择器中隐藏周数.我尝试了什么:

html的

 <input type="text" #dp="bsDaterangepicker" (onHidden)="onPickerHide()"  [isOpen]="showPicker"  [(ngModel)]="dateRange" style="position: absolute;visibility: hidden;" placeholder="Daterangepicker" class="form-control" bsDaterangepicker [bsConfig]="dateRangePickerConfig">

app.component.ts

showPicker= true;
datePickerConfig: Partial<BsDatepickerConfig>;
this.datePickerConfig = Object.assign({},
          { showWeekNumbers: false,
           dateInputFormat: 'DD-MM-YYYY'
           }
        );

我收到此控制台错误

在此输入图像描述

我有一个ngx引导程序模式，该模式当前有效，并打开“详细信息清单”页面，其中包含清单中每个人的特定数据。但是，我想使用路由，以便可以通过直接url打开我的列表模式，并根据其ID填充列表中的特定详细信息。例如，... / listings / listing / 50将打开“列表模式”，并填充列表ID 50的详细信息。

目前，我什至无法通过直接网址打开任何模式。

目前，我正在通过单击链接打开每个模式

<a (click)="openDetailsModal(listing)" ...

和我的ListingService

  openDetailsModal(listing: Listing): void {
    this.selectedListing = listing;
    this.bsModalRef = this.modalService.show(ListingDetailComponent, {class:'listingDetailModal'});
    this.bsModalRef.content.listing = this.selectedListing;
  }

另外，我目前还使用HttpClient从数据库中获取所有列表。