标签: ngx-bootstrap

我正在尝试将 Angular 版本升级到 v8 后构建我的项目，当我编译我的项目时，出现以下错误，

1>Module not found : error : Can't resolve 'ngx-bootstrap' in 'C:\Users\can.pahali\source\WestCore.MvcSpa-Upgrade'
1>     @ dll vendor vendor[9]
1>    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/bootstrap/dist/css/bootstrap.css:
1>        Entrypoint mini-css-extract-plugin = *
1>    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/font-awesome/css/font-awesome.css:
1>        Entrypoint mini-css-extract-plugin = *
1>    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css:
1>        Entrypoint mini-css-extract-plugin = *
1>C:\Users\can.pahali\source\WestCore.MvcSpa-Upgrade\WestCore.MvcSpa.csproj(156,5): error MSB3073: The command "node --max-old-space-size=4096 node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" exited with code 2.
1>Done building project "WestCore.MvcSpa.csproj" -- FAILED.
========== Rebuild All: 0 succeeded, 1 failed, 0 skipped ==========

我的ng …

我正在使用 angular 4 和 ngx-bootstrap 来打开模态。一切正常，我通过一个组件实现模态。我还可以通过将数据传递到模态content的性质bsModalRef。像这样：

this.bsModalRef = this.modalService.open(MyComponent);
this.bsModalRef.content.somedata = [...some array of products];

这一切都很好，然后我的模态可以访问一个名为somedata. 极好的。我遇到的问题是我想对somedata. 假设somedata是一个带有数量的产品列表，我希望模态将数量减少到单个值。我如何知道该数据何时在模态类中可用？我可以使用setTimeouthack，它有效，但让我内心感到恶心。是否有某种类似实现的生命周期钩子ngOnChanges，ngx-bootstrap以便我可以知道何时设置数据属性，以及何时更改？

我正在根据本文档使用 ngx boostrap popover

我需要使用，container="body"因为没有这个，主体样式会影响我的弹出框并被剪掉。但是，在添加此属性后，我遇到了一个新问题。当我单击按钮时，弹出窗口会显示在按钮的后面，这很好。但是，当我滚动主页时​​，弹出框不会随与其关联的按钮一起移动，因此进入分离状态，然后看起来很奇怪。我该如何解决这个问题？

我正在阅读ng-bookAngular 5上的Ari Lerner .我正在使用ngx-bootstrap和Bootstrap 4.表格验证似乎没有像勒纳先生那样实施.我不确定这是否是一个限制ngx-bootstrap...任何人都知道？

编辑 好的,我删除了ngx-bootstrap,只是加载了MaxCDNs Bootstrap 4,我有同样的问题.错误消息未出现.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { RegistrationFormComponent } from './registration-form/registration-form.component';
import {
  FormsModule,
  ReactiveFormsModule,
  FormBuilder,
  FormGroup
} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    RegistrationFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class …

我正在使用ngx bootstrap 的日期范围选择器，它工作正常。但是我想将它用于月份范围选择器。有什么方法可以自定义并以这种方式使用它？

我试过传递这样的属性 [bsConfig]="{ dateInputFormat: 'YYYY-MM' }" 并从中省略日期，但在选择时我仍然需要选择日期。

<input class="form-control" name="dob" placeholder="Date of Birth" type="text"  bsDatepicker [(bsValue)]="bsValue" [bsConfig]="{ dateInputFormat: 'YYYY-MM' }">

我正在使用此链接来实现Typeahead。现在，我使用TypeaheadOptionField在typeahead上显示名称，但它也将名称字符串绑定在模型中。我想绑定对象而不是字符串。

我的HTML代码：

<input formControlName="item"  class="form-control" [typeahead]="allItemsArray" [typeaheadItemTemplate]="customItemTemplate"
          [typeaheadOptionsLimit]="7" [typeaheadMinLength]="0" [typeaheadOptionField]="name" (typeaheadOnSelect)="onSelectItem($event)">

allItemsArray：

[
    {
        name: 'a',
        code: '12'
    },
    {
        name: 'b',
        code: '13'
    }
]

Value bound to form control: 'a'
Required value: {'name': 'a', 'code': '12'}

我尝试做的一件事是实现一个事件，该事件将模型值设置为对象，但没有用。

是否可以为ngx-bootstrap datepicker全局配置日期格式？

说明文档中提到的BsDatepickerConfig类,以及如何将它传递给每一个人日期选择器了,但是我有点惊讶,似乎有在全球范围内没有可能的配置(至少没有记录)

https://valor-software.com/ngx-bootstrap/#/datepicker#bs-datepicker-config

这是一个在stackblitz中的空白角度7项目,在Angular 6中使用,constructor(private bsModalRef: BsModalRef)所以我可以将值传递给我的子弹出组件.

但当我更新到角7时,它说Module not found: Error: Can't resolve 'ngx-bootstrap/modal/bs-modal-ref.service'.

在stackblitz中,它要求我安装ngx-bootstrap,但我已经安装了.

任何的想法？

我正在为我的 angular6 项目使用 NGX-Bootstrap。我有反应形式并添加了日期选择器，同时从日期选择器返回值获取完整格式例如：“2018-11-07T05:12:35.000Z”。但我想要 MM-DD-YYYY。

我正在使用两个库编写一个角度应用程序：ngx-bootstrap 和 ng-apexcharts。ApexCharts 提供了一个名为 的角度分量，它接受类型为 的<apx-chart>输入。html 看起来像这样：tooltipApexTooltip

  <apx-chart 
    [series]="[{data: timelineData}]"
    [chart]="timeline.chart"
      [fill]="timeline.fill"
      [legend]="timeline.legend"
      [plotOptions]="timeline.plotOptions"
      [xaxis]="timeline.xaxis"
      [colors]="timeline.colors"
      [title] = "timeline.title"
      [tooltip]="timeline.tooltip"
      [yaxis] = "timeline.yaxis"
   ></apx-chart>

以下是角度顶点图表文档的链接：https ://apexcharts.com/docs/angular-charts/

ngx-bootstrap 提供了一个名为的模块TooltipModule，当导入到应用程序模块中时，允许您在任何元素上放置tooltip属性，并且当用户将鼠标悬停在该元素上时，它将创建一个工具提示。看起来是这样的：

  <button type="button" class="btn btn-default btn-secondary mb-2"
      tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
      placement="top">
    Tooltip on top
  </button>

以下是 ngx-bootstrap 工具提示文档的链接：https://valor-software.com/ngx-bootstrap/#/tooltip

我试图一起使用这两个库，但是当我将工具提示模块添加到应用程序模块导入中时，出现编译错误。

@NgModule({
  imports: [
    BrowserModule,
    TooltipModule.forRoot(),
    ...
  ]
...

Error: src/app/activity-report/details/details.component.html:52:8 - error TS2322: Type 'ApexTooltip' is not assignable to …