标签: ng-bootstrap

我尝试为角度2运行ng-bootstrap,并且我收到错误以安装ng-bootstrap.我认为这是一个路径问题.当我尝试访问页面时,以及在npm开始时发生此404错误.当角度ng-bootstrap尝试加载时,我在导入模块上收到404错误:

[1] 16.08.20 20:01:00 404 GET /@ng-bootstrap/ng-bootstrap

但是这个模块在node_modules里面.谢谢

我想从typeahead上选择项目选择运行一些自定义逻辑.我无法使用typeahead控件绑定选定的项事件.我正在使用ng-bootstrap(bootstrap4).

<input type="text" [(ngModel)]="model" [ngbTypeahead]="search" placeholder="Search" [resultTemplate]="rt"  [inputFormatter]="formatter" />

我想将模态事件从模态组件传递给模态的父组件,但由于某种原因,我似乎无法让EventEmitter工作.如果有人有想法,将不胜感激.主要代码如下,从ng-bootstrap演示分叉的(非工作)插件在这里:http://plnkr.co/edit/xZhsqBV2mQaPxqFkoE7C？p = preview

app.ts

@Component({
  selector: 'my-app',
  template: `
    <div class="container-fluid" (notifyParent)="getNotification($event)">
    <template ngbModalContainer></template>
    <ngbd-modal-component ></ngbd-modal-component>
  </div>
  `
})
export class App {
      getNotification(evt) {
        console.log('Message received...');
    }
}

莫代尔,component.ts

import {Component, Input, Output, EventEmitter} from '@angular/core';

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
      <button type="button" class="btn btn-secondary" (click)="notify()">Notify</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;
  @Output() notifyParent: EventEmitter<any> …

我的应用程序文件夹结构如下：

>app
  app.module.ts
  app.routing.ts
>>auth
  login.component
  auth.module.ts
  atuh.routing.module.ts

现在，我想使用ngx-intl-input依赖于的模块ngx-bootstrap。我想包括intl-input在登录组件中。

所以，如果我进口ngx-bootsrap的auth.module...

auth.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { AuthRoutingModule } from './auth-routing.module';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { NgxIntlTelInputModule } from 'ngx-intl-tel-input';
@NgModule({
  imports: [
    CommonModule,
    AuthRoutingModule,
    BsDropdownModule.forRoot(),
    NgxIntlTelInputModule
  ],
  declarations: [LoginComponent]
})
export class AuthModule { }

我收到以下错误：

ERROR Error: Uncaught (in promise): Error: …

我正在尝试为daterangepicker添加功能,以允许根据所选的日期范围过滤项目列表.

我希望结合以下功能:

1. 有一个显示"过滤"的按钮.没有输入.

2. 用户可以单击该按钮,然后打开显示2个月的日历 - 当前和下一个.

3. 然后,用户可以选择日期范围.

4. 然后,所选日期范围将成为按钮的标签,向用户显示他或她选择的内容.

这个功能可以吗？当我尝试在按钮上添加日历时,它会完全中断.当我使用输入弹出日历时,它只允许我选择开始日期,然后关闭.

这就是我想要的:

<button #dp ngModel (click)="d.toggle()" (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t" ngbDatepicker #d="ngbDatepicker">
         Click Me
</button>


<ng-template #t let-date="date" let-focused="focused">
    <span class="custom-day"
    [class.focused]="focused"
    [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
    [class.faded]="isHovered(date) || isInside(date)"
    (mouseenter)="hoveredDate = date"
    (mouseleave)="hoveredDate = null">
    {{ date.day }}
</ng-template>

谢谢

我正在尝试垂直使用 ng-Bootstrap 选项卡。他们举了一个例子，但这不是我需要的，我希望它看起来像我在图中的样子。这个配置可以吗？关于采取什么方向的任何想法？

在此处输入图片说明

我尝试强制 jHipster 生成的 Angular 5 项目中的日期选择器使用波兰语语言环境，一周和几个月。据我了解有关文档：

https://ng-bootstrap.github.io/#/components/datepicker/examples#i18n

它应该使用默认设置，即：

共享-common.module.ts

...
import { registerLocaleData } from '@angular/common';
import locale from '@angular/common/locales/pl';
...

providers: [
    ...
    {
        provide: LOCALE_ID,
        useValue: 'pl'
    },
],
...
export class TestSharedCommonModule {
    constructor() {
        registerLocaleData(locale);
    }
}

用法

<input id="field_testDate" type="text" class="form-control" name="testDate" 
ngbDatepicker  #testDateDp="ngbDatepicker" [(ngModel)]="tester.testDate"
            required/>

不幸的是它不起作用，我也尝试了不同的方法，例如：

https://angular.io/api/core/LOCALE_ID

或者

https://github.com/NativeScript/nativescript-angular/issues/1147 - 我在这里复制了语言环境文件

你有什么想法可能是错的吗？

更新

我最终是这样解决的：

日期选择器-i18n.ts

import { Inject, Injectable, LOCALE_ID } from '@angular/core';
import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';

const I18N_VALUES = {
    en: …

Angular 6 ngBootstrap网站

(封端:其他)

在better728x90.gif正确的文件夹存在,不知道为什么我对确实存在的图像刚开此错误和其他404.

以下路径是正确的:

<a href="assets/images/banners/better728x90.gif">
    <img src="assets/images/banners/better728x90.gif" width="728" height="90" class="fit"><br>
</a>

当我在chrome检查器中检出img元素时,我看到了:

img[src="assets/images/banners/better728x90.gif"] {
    display: none !important;
}

当我display:block用以下方法强制所有图像时,最终会显示丢失的图像图标.

:host {
  img {
    display: block !important;
  }
}

assets/images/banners/better728x90.gif:1 GET http://localhost:4200/assets/images/banners/better728x90.gif net::ERR_BLOCKED_BY_CLIENT

我有一个反应式表单，当用户在输入中按下 ESC 键时，我想在表单隐藏之前显示一个“你确定”模式。
一旦显示模态，我就会在控制台中收到以下异常：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has 
changed after it was checked. Previous value: 'ng-untouched: true'. Current 
value: 'ng-untouched: false'.

这是一个显示问题的 stackblitz（焦点输入并按 ESC）

注意：当您聚焦输入，模糊并再次聚焦时，问题不会再次出现ng-untouched变化。

有什么解决方法吗？实现此类功能的推荐方法是什么？

提前致谢！

我想将 ngbDatepicker 设置为从星期日开始一周，而不是默认的星期一。

我正在尝试使用weekStartsOn="0"但它没有效果。这是我的 html 代码

<input ngbDatepicker #d="ngbDatepicker" class="form-control" [minDate]="minDate" [maxDate]="maxDate" [markDisabled]="isDisabled" weekStartsOn="0">